Question

我有代码，点击时展开下拉菜单以显示一组链接。有三种不同的下拉菜单，每种下拉菜单都有一组不同的链接，显示用户点击的时间。

脚本如下，但它不是动态的。什么是更好，更有效的编写脚本的方法，所以当需要额外的下拉时，我不需要添加它？

$(".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

您可以将jquery减少为一个函数。首先，请使用div查询button-nav来查看$("div[class^=button-nav]")个类。然后获取id并使用id

切换$("."+$(this).attr('id')).toggle();的任何课程

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

从提供的代码中我假设.row1是一个错字。我希望你的意思是#row1。如果是这样，代码将减少为

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

要将所有三个功能合二为一，您可以为所有.button-nav1，.button-nav2和.button-nav3（比如button-nav）添加公共类，并将功能更改为

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

显示下拉内容

2 个答案: