ドロップダウンの内容を表示

Question

クリックするとドロップダウンが展開され、一連のリンクが表示されるというコードがあります。ユーザーがクリックしたときに表示されるリンクがそれぞれ異なる3つの異なるドロップダウンがあります。

スクリプトは以下のとおりですが、動的ではありません。スクリプトを書くためのより良い、より効率的な方法は何ですか？追加のドロップダウンが必要なときに追加する必要はありません。コードから

$(".button-nav1").click(function() { 
 
    $(".row1").toggle(); 
 
}); 
 

 
$(".button-nav2").click(function() { 
 
    $(".row2").toggle(); 
 
}); 
 

 
$(".button-nav3").click(function() { 
 
    $(".row3").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="row1" class="button-nav1">Joe<span class="crt">&nbsp;▼</span> 
 
</div> 
 
<div class="row1 BGpadding"> 
 
    <ul class="2ndRESET"> 
 
    <li class="resetTWO"><strong>Overview</strong> 
 
    </li> 
 
    <li><strong>Training</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lorem Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    <li><strong>Toomy</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lipsum </a> 
 
     </li> 
 
     <li><a href="#">Loremu</a> 
 
     </li> 
 
     <li><a href="#">Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    </ul> 
 
</div> 
 
</div> 
 

 
<div id="row2" class="button-nav2">Joe<span class="crt">&nbsp;▼</span> 
 
</div> 
 
<div class="row2 BGpadding"> 
 
    <ul class="2ndRESET"> 
 
    <li class="resetTWO"><strong>Overview</strong> 
 
    </li> 
 
    <li><strong>Training and Help</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lorem Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    <li><strong>Toomy</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lipsum </a> 
 
     </li> 
 
     <li><a href="#">Loremu</a> 
 
     </li> 
 
     <li><a href="#">Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    </ul> 
 
</div> 
 
</div> 
 

 
<div id="row3" class="button-nav3">Joe<span class="crt">&nbsp;▼</span> 
 
</div> 
 
<div class="row3 BGpadding"> 
 
    <ul class="2ndRESET"> 
 
    <li class="resetTWO"><strong>Overview</strong> 
 
    </li> 
 
    <li><strong>Training</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lorem Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    <li><strong>Toomy</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lipsum </a> 
 
     </li> 
 
     <li><a href="#">Loremu</a> 
 
     </li> 
 
     <li><a href="#">Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    </ul> 
 
</div> 
 
</div>

Answer 1

あなたにする機能をすべて.button-nav1、.button-nav2と.button-nav3（たとえばbutton-nav）に共通するクラスを追加して変更することができますjqueryを1つの関数に減らすことができます。まずで始まり、クエリが$("div[class^=button-nav]")で始まるクラスを持つdivを聞きます。そして、idを取得し、そのidで任意のクラスを切り替える$("."+$(this).attr('id')).toggle();

$("div[class^=button-nav]").on('click',function() { 
 
    $("."+$(this).attr('id')).toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="row1" class="button-nav1">Joe<span class="crt">&nbsp;▼</span> 
 
</div> 
 
<div class="row1 BGpadding"> 
 
    <ul class="2ndRESET"> 
 
    <li class="resetTWO"><strong>Overview</strong> 
 
    </li> 
 
    <li><strong>Training</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lorem Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    <li><strong>Toomy</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lipsum </a> 
 
     </li> 
 
     <li><a href="#">Loremu</a> 
 
     </li> 
 
     <li><a href="#">Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    </ul> 
 
</div> 
 
</div> 
 

 
<div id="row2" class="button-nav2">Joe<span class="crt">&nbsp;▼</span> 
 
</div> 
 
<div class="row2 BGpadding"> 
 
    <ul class="2ndRESET"> 
 
    <li class="resetTWO"><strong>Overview</strong> 
 
    </li> 
 
    <li><strong>Training and Help</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lorem Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    <li><strong>Toomy</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lipsum </a> 
 
     </li> 
 
     <li><a href="#">Loremu</a> 
 
     </li> 
 
     <li><a href="#">Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    </ul> 
 
</div> 
 
</div> 
 

 
<div id="row3" class="button-nav3">Joe<span class="crt">&nbsp;▼</span> 
 
</div> 
 
<div class="row3 BGpadding"> 
 
    <ul class="2ndRESET"> 
 
    <li class="resetTWO"><strong>Overview</strong> 
 
    </li> 
 
    <li><strong>Training</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lorem Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    <li><strong>Toomy</strong> 
 
    </li> 
 
    <ul class="resetTWO"> 
 
     <li><a href="#">Lipsum </a> 
 
     </li> 
 
     <li><a href="#">Loremu</a> 
 
     </li> 
 
     <li><a href="#">Lipsum</a> 
 
     </li> 
 
    </ul> 
 
    </ul> 
 
</div> 
 
</div>

Answer 2

私は.row1はタイプミスであると仮定して。私はあなたが#row1を意味することを願っています。そのコードは1にすべての3つの機能を組み合わせること

$('.button-nav1,.button-nav2,.button-nav3').click(function(){ 
    $(this).toggle(); 
} 

に縮小されている場合は、

$(document).on('click', '.button-nav', function(){ 
    $(this).toggle(); 
}