示ä¾html
1
2
<div class="abc" style="display:none"></div>
<input type="button" class="but" />
æç®åçæ¹æ³ï¼
1
2
3
4
5
6
7
<script>
$(document).ready(function(e) {
$(".but").click(function(e) {
$(".abc").toggle();
});
});
</script>
toggle() çä½ç¨å°±æ¯å½å¯¹è±¡æ¯æ¾ç¤ºçå°±éèï¼å½æ¯éèçåæ¾ç¤ºã
------
å¦æä½ é¤äºæ¾ç¤ºåéèä¹å¤è¿éè¦åæ¶å®ç°å
¶ä»åè½çè¯ï¼å¯ä»¥è¿æ ·ï¼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(document).ready(function(e) {
$(".but").click(function(e) {
if( $(".abc").hasClass("show") ){
// æ§è¡éè
$(".abc").hide().removeClass("show");
// å
¶ä»
}else{
// æ¾ç¤º
$(".abc").show().addClass("show");
}
});
});
</script>
è¿ééè¿èªå®ä¹ä¸ä¸ª class : show æ¥å¤æ div æ¯æ¾ç¤ºæéè
hasClass() æ¯å¦åå¨æ个class
hide() éè对象
show() æ¾ç¤ºå¯¹è±¡
removeClass() 移é¤ä¸ä¸ªclass
addClass() æ·»å ä¸ä¸ªclass
é¤æ¤ï¼è¿å¯ä»¥éè¿jquery设置è¿ä¸ª div ç css : display:none/block æ¥å®ç°éè/æ¾ç¤º
温馨提示:内容为网友见解,仅供参考