如何让我的jQuery代码适用于所有元素

Question

我有这个手风琴菜单但它只适用于第一个ul。如何让它在所有right这样的工作？如果你能解释我做错了什么，那么我知道将来会很棒。

此外，我如何获取它，以便每次点击时，链接在两个类down和turq-font之间切换？它上面还有类right。我希望在点击链接并显示菜单时删除down并替换为$(function() { $("#show-menu").click(function() { $("#sub-menu-acc").toggleClass("active-menu", 1000); }); });。继承我的代码：

＆＃13;

＆＃13;

.active-menu {
  display: block !important;
}
.admin-area ul li {
  margin: 6px 0px;
}
.admin-right-menu ul li a {
  color: black;
  text-decoration: none;
}
.admin-area ul {
  list-style: none;
  margin-bottom: 20px;
}
.admin-area ul li ul {
  display: none;
  padding-left: 20px;
  margin-bottom: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="admin-area">
<div class="admin-right-menu">
  <ul>
    <li><a href="#" id="show-menu" class="turq-font right">Stats ></a>
      <ul id="sub-menu-acc">
        <li><a href="#">Business Stats</a>
        </li>
        <li><a href="#">Affiliate stats</a>
        </li>
      </ul>
    </li>
    <li><a href="#" id="show-menu" class="turq-font right">Reports ></a>
      <ul id="sub-menu-acc">
        <li><a href="#">Global</a>
        </li>
        <li><a href="#">Sales</a>
        </li>
        <li><a href="#">Sales trends</a>
        </li>
      </ul>
    </li>
  </ul>
</div></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是由于您使用了重复的id属性;它们在document内应该是唯一的。将代码转换为使用类。

另请注意，您应使用this关键字遍历DOM，以查找与所点击的ul元素相关的a，并添加right down toggleClass()致电。试试这个：

＆＃13;

＆＃13;

$(function() {
  $(".show-menu").click(function(e) {
    e.preventDefault(); // stop the '#' of the clicked a appearing in the URL 
    $(this).toggleClass('right down').next(".sub-menu-acc").toggleClass("active-menu");
  });
});

＆＃13;

.active-menu {
  display: block !important;
}
.admin-area ul li {
  margin: 6px 0px;
}
.admin-right-menu ul li a {
  color: black;
  text-decoration: none;
}
.admin-area ul {
  list-style: none;
  margin-bottom: 20px;
}
.admin-area ul li ul {
  display: none;
  padding-left: 20px;
  margin-bottom: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="admin-area">
  <ul>
    <li>
      <a href="#" class="show-menu turq-font right">Stats ></a>
      <ul class="sub-menu-acc">
        <li>
          <a href="#">Business Stats</a>
        </li>
        <li>
          <a href="#">Affiliate stats</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" class="show-menu turq-font right">Reports ></a>
      <ul class="sub-menu-acc">
        <li>
          <a href="#">Global</a>
        </li>
        <li>
          <a href="#">Sales</a>
        </li>
        <li>
          <a href="#">Sales trends</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;