jquery點(diǎn)擊展示與隱藏更多內(nèi)容
先上效果圖
點(diǎn)擊前

點(diǎn)擊后展開(kāi)

html代碼
<div id="tips" class="center-block">
<h5 class="tips_head">
<u>遇到問(wèn)題?</u>
</h5>
<div class="tips_content">
<ol>
<li>Ctrl+F5刷新本頁(yè)面</li>
<li>關(guān)閉頁(yè)面,重新加載本頁(yè)面和登錄</li>
<li>更換瀏覽器(建議使用火狐和谷歌瀏覽器)</li>
<li>聯(lián)系我們 </li>
</ol>
</div>
</div>
jquery代碼
$(function() { //遇到問(wèn)題的彈出文字
$("#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; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery簡(jiǎn)單實(shí)現(xiàn)列表隱藏和顯示效果示例
- jquery實(shí)現(xiàn)點(diǎn)擊展開(kāi)列表同時(shí)隱藏其他列表
- jquery特效 點(diǎn)擊展示與隱藏全文
- jQuery焦點(diǎn)控制圖層展示延遲隱藏的方法
- JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
- jQuery控制TR顯示隱藏的幾種方法
- jQuery控制TR顯示隱藏的三種常用方法
- Jquery 點(diǎn)擊按鈕顯示和隱藏層的代碼
- Jquery實(shí)現(xiàn)點(diǎn)擊切換圖片并隱藏顯示內(nèi)容(2種方法實(shí)現(xiàn))
- jQuery實(shí)現(xiàn)常見(jiàn)的隱藏與展示列表效果示例
相關(guān)文章
jQuery實(shí)現(xiàn)二級(jí)下拉菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)二級(jí)下拉菜單效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
jquery實(shí)現(xiàn)彈窗功能(窗口居中顯示)
本文主要介紹了jquery實(shí)現(xiàn)彈窗功能且彈出確認(rèn)框始終位于窗口中間位置的實(shí)例,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07
正負(fù)小數(shù)點(diǎn)后兩位浮點(diǎn)數(shù)實(shí)現(xiàn)原理及代碼
需要做個(gè)對(duì)兩位小數(shù)點(diǎn)的正負(fù)浮點(diǎn)數(shù)的處理要求:非數(shù)字或者.字符自動(dòng)清除,并對(duì).12自動(dòng)修補(bǔ).前的0,實(shí)現(xiàn)原理如下,感興趣的朋友可以參考下2013-09-09
如何基于jQuery實(shí)現(xiàn)五角星評(píng)分
這篇文章主要介紹了如何基于jQuery實(shí)現(xiàn)五角星評(píng)分,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
文字浮動(dòng)提示效果想必大家都有見(jiàn)到過(guò)吧,下面為大家詳細(xì)介紹下使用jquery是如何做到的,感興趣的朋友可以參考下2013-12-12
Jquery Ajax學(xué)習(xí)實(shí)例7 Ajax所有過(guò)程事件分析示例
JQuery在執(zhí)行Ajax的過(guò)程中會(huì)觸發(fā)很多事件。2010-03-03

