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