jQuery判斷一個元素是否可見的方法
更新時間：2015年06月05日 14:55:41 作者：三雨二草
這篇文章主要介紹了jQuery判斷一個元素是否可見的方法,涉及jQuery鏈?zhǔn)讲僮骷皹邮脚卸ǖ募记?需要的朋友可以參考下
本文實例講述了jQuery判斷一個元素是否可見的方法。分享給大家供大家參考。具體如下：
jQuery 可以很容易地確定一個元素是可見的或是隱藏的，然后分別做不同的處理。如：我想根據(jù)某 div 是否可見，在按鈕上顯示不同的文字和圖標(biāo)?？梢赃@樣實現(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');
});
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
jQuery EasyUI API 中文文檔 - ComboGrid 組合表格,需要的朋友可以參考下。2011-10-10
jQuery實現(xiàn)動態(tài)添加和刪除input框代碼實例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加和刪除input框，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
jQuery切換網(wǎng)頁皮膚并保存到Cookie示例代碼
這篇文章主要介紹通過jQuery切換網(wǎng)頁皮膚并將狀態(tài)保存到Cookie的相關(guān)代碼,需要的朋友可以參考下2014-06-06
jquery中map函數(shù)與each函數(shù)的區(qū)別實例介紹
​jquery中的each函數(shù)和map函數(shù)的用法看起來差不多，但其實還是有一點區(qū)別的,each返回的是原來的數(shù)組，并不會新創(chuàng)建一個數(shù)組。而map方法會返回一個新的數(shù)組2014-06-06
這篇文章主要介紹了EasyUI在表單提交之前進行驗證的實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery操作基本控件方法,結(jié)合實例形式簡單分析了jQuery針對控件的樣式,ID獲取,遍歷及屬性操作等常用技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery操作動畫,結(jié)合完整實例形式分析了jquery針對頁面元素動畫效果相關(guān)實現(xiàn)技巧,涉及jquery slideUp與slideDown方法的使用,需要的朋友可以參考下2020-01-01
為了簡化JavaScript的開發(fā)，一些JavaScript程序庫誕生了，下面是目前集中流行的JavaScript程序庫的介紹和對比，感興趣的朋友可以了解下2013-09-09
這篇文章主要介紹了jQuery實現(xiàn)的簡單拖動層,可實現(xiàn)響應(yīng)鼠標(biāo)拖動div層及動態(tài)顯示坐標(biāo)值的功能,涉及jQuery鼠標(biāo)響應(yīng)及頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
jQuery實現(xiàn)鼠標(biāo)經(jīng)過顯示動畫邊框特效
本文主要介紹了jQuery鼠標(biāo)經(jīng)過顯示動畫邊框特效的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03