読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【jQuery】アコーディオンメニュー、thisセレクターを使う


f:id:p_and_a_fam:20170426011910p:plain

<ul class="box">
<li class="button">&#x25BC;おはよう
<ul class="inner">
<li>早上好</li>
<li>good morning</li>
</ul>
</li>
<li class="button">&#x25BC;こんにちは
<ul class="inner">
<li>你好</li>
<li>hello</li>
</ul>
</li>
<li class="button">&#x25BC;こんばんは
<ul class="inner">
<li>晚上好</li>
<li>good night</li>
</ul>
</li>
<li class="button">&#x25BC;さよなら
<ul class="inner">
<li>再见</li>
<li>see you</li>
</ul>
</li>
</ul>
$(function(){
    $('.inner').css('display','none');
    $('.button').on('click',function(){
    if($('.inner',this).css('display') == 'none'){
        $('.inner').slideUp('1000');
        $('.inner',this).slideDown('1000');
    }else{
        $('.inner',this).slideUp('1000');
        }
    });
});