jQuery判斷一個(gè)元素是否可見的方法
本文實(shí)例講述了jQuery判斷一個(gè)元素是否可見的方法。分享給大家供大家參考。具體如下:
jQuery 可以很容易地確定一個(gè)元素是可見的或是隱藏的,然后分別做不同的處理。如:我想根據(jù)某 div 是否可見,在按鈕上顯示不同的文字和圖標(biāo)??梢赃@樣實(shí)現(xiàn):
方法一:
$('#para_div button').click(function() { if($(this).next().is(":visible")) { //$(this).html('顯示'); $(this).css({"background":"url(/images/btn_arrow_down.png) no-repeat"}); } else { //$(this).html('隱藏'); $(this).css({"background":"url(/images/btn_arrow_up.png) no-repeat"}); } $(this).next().slideToggle('fast'); });
方法二:
$('#para_div button').click(function() { if($(this).next().css('display') == 'none') { //$(this).html('隱藏'); $(this).css({"background":"url(/images/btn_arrow_up.png) no-repeat"}); } else{ //$(this).html('顯示'); $(this).css({"background":"url(/images/btn_arrow_down.png) no-repeat"}); } $(this).next().slideToggle('fast'); });
方法三:
$('#para_div button').click(function() { var $cn = $(this).next(); //$(this).html(($cn.is(":visible")) ? '顯示' : '隱藏'); (this).css(($cn.is(":visible")) ? {"background":"url(images/btn_arrow_down.png) no-repeat"} : {"background":"url(images/btn_arrow_up.png) no-repeat"}); $cn.toggle('fast'); });
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery獲取input type=text中的值的各種方式(總結(jié))
下面小編就為大家?guī)硪黄猨query獲取input type=text中的值的各種方式(總結(jié))。小編覺的挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12jquery無法設(shè)置checkbox選中即沒有變成選中狀態(tài)
設(shè)置以后checkbox并沒有變成選中狀態(tài),用chrome調(diào)試看了一下,checkbox中確實(shí)有checked屬性,針對(duì)這個(gè)問題,大家可以參考下本文2014-03-03ASP.NET jQuery 實(shí)例8 (動(dòng)態(tài)添加內(nèi)容到DropDownList)
在web應(yīng)用里,我們經(jīng)常需要通過其他控件的事件觸發(fā)動(dòng)態(tài)構(gòu)造DropDownList數(shù)據(jù)內(nèi)容。在這節(jié)中,我們將會(huì)看到如何實(shí)現(xiàn)通過選擇第一個(gè)下來框的內(nèi)容來動(dòng)態(tài)構(gòu)造第二個(gè)下拉框的內(nèi)容2012-02-02jquery mobile實(shí)現(xiàn)撥打電話功能的幾種方法
在做一個(gè)便民服務(wù)電話,用到移動(dòng)web中列出的電話,點(diǎn)擊需要實(shí)現(xiàn)調(diào)用通訊錄,撥打電話功能,有需要的朋友可以參考一下2013-08-08jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法,可實(shí)現(xiàn)合并兩個(gè)數(shù)組并出去重復(fù)項(xiàng)的功能,涉及數(shù)組的遍歷、判斷、追加等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04有關(guān)jQuery中parent()和siblings()的小問題
本文通過一個(gè)實(shí)例給大家介紹有關(guān)parent()和siblings()問題原因及解決方案,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-06-06使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
使用CSS和jQuery模擬select并實(shí)現(xiàn)提交后取得數(shù)據(jù),詳細(xì)實(shí)現(xiàn)及截圖如下,感興趣的朋友可以參考下2013-10-10用jquery實(shí)現(xiàn)動(dòng)畫跳到頂部和底部(這個(gè)比較簡單)
用jquery實(shí)現(xiàn)動(dòng)畫的跳到頂部和底部,當(dāng)點(diǎn)擊頂部按鈕的時(shí)候,執(zhí)行方法,scrollTop屬性獲取選中標(biāo)簽距滾動(dòng)條的距離2014-09-09jquery trigger實(shí)現(xiàn)聯(lián)動(dòng)的方法
這篇文章主要介紹了jquery trigger實(shí)現(xiàn)聯(lián)動(dòng)的方法,結(jié)合實(shí)例形式分析了trigger的具體使用技巧,需要的朋友可以參考下2016-02-02