Ryusuke Fuda's Tech Blog

Softweare Enginier about Web, iOS, Android.

リスト要素をクリックするとリスト要素が出てくるtoggle(jQuery)

<li class="pickup" onclick="test('.show');return false;"><a href="http://www.aa.jp" class="bold" target="_blank">親要素</a></li>
      <li class="pickup show" style="display:none"><a href="http://www.bb.jp" class="bold" target="_blank">子要素</a></li>
      <li class="pickup show" style="display:none"><a href="http://www.cc.jp" class="bold" target="_blank">子要素</a></li>

<script type="text/javascript">

function test(target){
    var obj = $(target);
    for(var i=0; i<obj.size(); i++){
        $(obj[i]).toggle();
    }
}

</script>


<li class="pickup show" style="display:none"><a href="http://www.bb.jp" class="bold" target="_blank">子要素</a></li>

子要素は display:none で非表示にしておく。