Question

尝试制作javascript水平菜单，但无法获得第二个按钮来打开自己的项目（当我点击第二个按钮打开第一个按钮的项目时）这里是当前代码：

JavaScript的：

$(document).ready(function() {
  $(".menu-button,.menu-button1").click(function() {
    $(".menu-bar").toggleClass("open");
  });
})

HTML：

<ul class="menu">
  <li title="home"><a href="#" class="menu-button home">menu</a></li>
  <li title="pencil"><a href="#" class="menu-button1 pencil">pencil</a></li>
  <li title="about"><a href="#" class="active about">about</a></li>
</ul>

<ul class="menu-bar">
  <li><a href="#" class="menu-button">Menu0</a></li>
  <li><a href="#">Home2000</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Parent</a></li>
  <li><a href="#">About</a></li>
</ul>

<ul class="menu-bar">
  <li><a href="#" class="menu-button1">Menu1</a></li>
  <li><a href="#">About</a></li>
</ul>

Answer 1

我同意M.Doye关于使用.each的评论（但很抱歉，我无法直接回答）。

我想补充一点，我认为使用这种HTML结构会更容易：

<ul class="menu">

  <li title="home">
     <a href="#" class="menu-button">Show Menu 1</a>
     <ul class="menu-bar">
        <li><a href="#" class="menu-button">Menu1 </a>
        </li>
     </ul>
  </li>

  <li title="pencil">
    <a href="#" class="menu-button">Show Menu 2</a>
      <ul class="menu-bar">
        <li><a href="#" class="menu-button">Menu2 </a>
        </li>
     </ul>
  </li>

</ul>

单击链接并使用.next（）或.siblings或最接近的...来显示正确的ul。但是当然你必须重写CSS：）

Answer 2

在我开始回答之前，让我解释一下jQuery。

$(".menu-button,.menu-button1").click(function() {
  $(".menu-bar").toggleClass("open");
});

这个细分：

$(".menu-button,.menu-button1").click(function() { - ＆gt;当点击任何带有类菜单按钮或类菜单按钮1的项目时
$(".menu-bar").toggleClass("open"); - ＆gt;使用课程菜单栏切换页面中所有元素的“打开”课程。

由于您调用所有菜单而不是所需的特定菜单，因此会打开它们。

因此，对于初学者来说更具体 - 使用ID或唯一/识别类：

JS：

$(document).ready(function() {
  $(".menu-button.home").click(function() {
    $(".menu-bar.home").toggleClass("open");
  });

  $(".menu-button.pencil").click(function() {
    $(".menu-bar.pencil").toggleClass("open");
  });
})

HTML：

<ul class="menu">
  <li title="home"><a href="#" class="menu-button home">menu</a></li>
  <li title="pencil"><a href="#" class="menu-button pencil">pencil</a></li>
  <li title="about"><a href="#" class="active about">about</a></li>
</ul>

<ul class="menu-bar home">
  <li><a href="#" class="menu-button">Menu0</a></li>
  <li><a href="#">Home2000</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Parent</a></li>
  <li><a href="#">About</a></li>
</ul>

<ul class="menu-bar pencil">
  <li><a href="#" class="menu-button1">Menu1</a></li>
  <li><a href="#">About</a></li>
</ul>

Answer 3

这是更新的代码

$(document).ready(function () {
    $(".menu-button,.menu-button1").click(function () {
        $(this).siblings(".menu-bar").toggleClass("open");
    })
})

<ul class="menu">
  <li title="home"><a href="#" class="menu-button home">menu</a>
    <ul class="menu-bar">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
  <li title="pencil"><a href="#" class="menu-button1 pencil">pencil</a>
    <ul class="menu-bar">
      <li><a href="#">Menu0</a></li>
      <li><a href="#">Home2000</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Parent</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
</ul>

这是一个jsfiddle

javascript水平菜单点击打开

3 个答案: