javascript水平菜单单击打开

试图创建javascript水平菜单，但无法让第二个按钮打开它自己的项目（当我单击第二个按钮时，它会打开第一个按钮的项目），以下是当前代码：

JavaScript:

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

HTML:

我同意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（）或.sides或最近的。。。显示正确的ul。

---

当然，您必须重写CSS:）

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

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

这一点细分如下：

• $（“.menu-button，.menu-button1”）。单击带有类菜单按钮或类菜单按钮1的任何项时，单击（function（）{

  ->->

• $（“.menu bar”）.toggleClass（“打开”）；

  ->使用类菜单栏切换页面中所有元素的“打开”类

由于调用了所有菜单而不是所需的特定菜单，因此会同时打开这两个菜单

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

JS:

HTML:

这里是更新的代码

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

$（文档）.ready（函数（）{
$（“.menu按钮，.menu-button1”）。单击（函数（）{
$（this）.this（“.menu bar”）.toggleClass（“打开”）；
})
})

---

这是一个

请创建一个JSFIDLE。这将很容易理解。您可以同时发布CSS吗？在这里查看演示：

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

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

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

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