下拉标识

Question

我有两个下拉选项：

<ul class="menu">
  <li hidden class="inicio"><a href "#">Inicio</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" id="Drop1">OPTION 1<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li class="bd-ric"><a href="#">Option 1.1</a>
      </li>
      <li><a href="#">Option 1.2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a href="#" class="dropdown-toggle" id="Drop2">OPTION 2<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li class="bd-ric"><a href="#">Option 2.1</a>
      </li>
      <li><a href="#">Option 2.2</a>
      </li>
    </ul>
  </li>
</ul>

当我尝试创建Javascript来切换它时，它们都打开了：

$('.dropdown-toggle').click(function() {
  $('.dropdown-menu').toggle();
})

我应该在html上创建一个函数并调用它，还是可以为特定的id调用toggle事件？

Answer 1

您可以使用jQuery's next method：

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li hidden class="inicio"><a href "#">Inicio</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" id="Drop1">OPTION 1<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li class="bd-ric"><a href="#">Option 1.1</a>
      </li>
      <li><a href="#">Option 1.2</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" id="Drop2">OPTION 2<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li class="bd-ric"><a href="#">Option 2.1</a>
      </li>
      <li><a href="#">Option 2.2</a>
      </li>
    </ul>
  </li>
</ul>