下拉選單隱藏與顯示
阿新 • • 發佈：2019-02-06
<script type="text/javascript"> $(function(){ $('p:first span').css('color','red'); $('p:first + p').css('color','green'); $('a:last').css('color','red'); $('.sz').css('background-color','pink'); $('.open').click(function(){ if($('.in:hidden').length >0){ $('.in').removeClass('hidden'); }else{ $('.in').addClass('hidden'); } }) }) </script> </head> <body> <p>淘樂，發現更多生活，<span>快樂</span>就在你身邊...</p> <p>近期熱門......<a class="open">更多</a></p> <div class="on"> <p>言語之庭</p> <p>斯托克</p> <p class="sz">宿醉</p> <p>巨人捕手傑克</p> <p>副作用</p> <div class="in hidden"> <p>血肉之軀</p> <p>7號房的禮物</p> <p>尖叫聲</p> </div> <a>更多排名</a> </div> </body>
if($('.in:hidden').length >0){
$('.in').removeClass('hidden');
}else{
$('.in').addClass('hidden');
}
:hidden先提出被隱藏的
<div class="in hidden">
<p>血肉之軀</p>
<p>7號房的禮物</p>
<p>尖叫聲</p>
</div>
此盒子的內容，
如果盒子裡面的值的長度=0，把隱藏刪除，讓它顯示。
如果盒子裡面的值的長度！=0，把隱藏新增，讓它隱藏。