jquery點(diǎn)擊展示與隱藏更多內(nèi)容
先上效果圖
點(diǎn)擊前
點(diǎn)擊后展開
html代碼
<div id="tips" class="center-block"> <h5 class="tips_head"> <u>遇到問題?</u> </h5> <div class="tips_content"> <ol> <li>Ctrl+F5刷新本頁面</li> <li>關(guān)閉頁面,重新加載本頁面和登錄</li> <li>更換瀏覽器(建議使用火狐和谷歌瀏覽器)</li> <li>聯(lián)系我們 </li> </ol> </div> </div>
jquery代碼
$(function() { //遇到問題的彈出文字 $("#tips h5.tips_head").bind("click", function() { var $tips_content = $(this).next("div.tips_content"); if ($tips_content.is(":visible")) { $tips_content.hide(); } else { $tips_content.show(); } }) })
css代碼
.tips_head { padding-left:20px; cursor: pointer ; text-align:left; margin-top:20px; color:red;} .tips_content { padding: ; border-top: 1px solid #0050D0; display:block; display:none; text-indent: 2em; text-align:left; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery簡單實(shí)現(xiàn)列表隱藏和顯示效果示例
- jquery實(shí)現(xiàn)點(diǎn)擊展開列表同時(shí)隱藏其他列表
- jquery特效 點(diǎn)擊展示與隱藏全文
- jQuery焦點(diǎn)控制圖層展示延遲隱藏的方法
- JQuery顯示、隱藏div的幾種方法簡明總結(jié)
- jQuery控制TR顯示隱藏的幾種方法
- jQuery控制TR顯示隱藏的三種常用方法
- Jquery 點(diǎn)擊按鈕顯示和隱藏層的代碼
- Jquery實(shí)現(xiàn)點(diǎn)擊切換圖片并隱藏顯示內(nèi)容(2種方法實(shí)現(xiàn))
- jQuery實(shí)現(xiàn)常見的隱藏與展示列表效果示例
相關(guān)文章
jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
暫時(shí)沒有想到什么好的解決辦法,我現(xiàn)在加了個(gè)瀏覽器判斷非ie的話就注冊blur事件,這樣有個(gè)問題就是blur實(shí)在別的控件活動焦點(diǎn)的時(shí)候,txtStation控件注冊的方法是為了填充它緊挨著的一個(gè)下拉列表2010-08-08表單類各種類型(文本框)失去焦點(diǎn)效果jquery代碼
基于jquery實(shí)現(xiàn)表單類各種類型(文本框)失去焦點(diǎn)效果,代碼簡單實(shí)用,感興趣的朋友可以參考下,希望對你有所幫助2013-04-04基于twbsPagination.js分頁插件使用心得(分享)
下面小編就為大家?guī)硪黄趖wbsPagination.js分頁插件使用心得(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10基于jQuery實(shí)現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個(gè)代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置,需要的朋友可以參考一下2018-06-06Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動實(shí)現(xiàn)代碼
Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無縫滾動的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11juqery 學(xué)習(xí)之三 選擇器 層級 基本
juqery 學(xué)習(xí)之三 選擇器 層級 基本,學(xué)習(xí)jquery的朋友可以參考下。2010-11-11