javascript - onclick toggleClass 不工作

Question

当我点击类(class)时 dropdown-toggle空类 <li class="">应该改成开放的..像<li class="open">

这是我的 Fiddle

这是我的脚本:

$(document).ready(function(){
    $(".dropdown-toggle").click(function(){
    $("ul li.current").toggleClass("open");
    alert('clicked');
    });
});

我一如既往地尝试点击类(class) dropdown-toggle通过 toggleClass 切换类(class).

但它不是切换。我在做什么错误，我该如何解决。

Answer 1

您需要定位被点击的 li 元素，它是被点击的 dropdown-toggle 的父元素，因此您可以使用 this 和 .closest() 来找到它

$(document).ready(function() {
  $(".dropdown-toggle").click(function() {
    $(this).closest('li').toggleClass("open");
  });
});

.submenu {
  display: none;
}
.open .submenu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav nav-list">
  <li class="">
    <a class="dropdown-toggle"><span class="menu-text"> First </span></a>
    <ul class="submenu">
      <li class=""><a href="tables.html">Add First</a></li>
      <li class=""><a href="jqgrid.html">Edit First</a></li>
    </ul>
  </li>
  <li class="">
    <a class="dropdown-toggle"><span class="menu-text"> Second </span></a>
    <ul class="submenu">
      <li class=""><a href="tables.html">Add Second</a></li>
      <li class=""><a href="jqgrid.html">Edit Second</a></li>
    </ul>
  </li>
</ul>