Question

我想使用css和jquery在导航栏上创建多个dropdown菜单。但问题是，当我点击一个下拉列表时，其他下拉列表也会显示出来。

我提供了dropdown ul课程.menu-dropdown，当我点击其中一个时，将显示所有.menu-dropdown课程。

$(document).ready(function() {
    $(".dropdown-button").on("click", function() {
        $(".dropdown-li").find(".menu-dropdown").css("display", "block");
    });
});

这是我的jquery代码。

Answer 1

$(document).ready(function() {
   $(".dropdown-button").on("click", function() {
    $(this).find(".menu-dropdown").css("display", "block");
   });
});

Answer 2

这是一个点击解决方案。我想在<ul>元素上设置类更简单，而不是在每个<li>上设置类：

$(document).ready(function() {
  $("ul > li > a").on("click", function(event) {
    event.preventDefault();
    $(this).next('ul').toggleClass('active');
  });
});

ul > li > ul {
  display: none;
}

ul.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
  <li><a href="#">About</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
</ul>

如果可能的话，我们应该尽可能简单地做到这一点。所以这是没有javascript / jQuery（没有点击）但是:hover所以只有CSS解决方案。

ul > li > ul {
  display: none;
}

ul > li:hover > ul {
  display: block;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
  <li><a href="#">About</a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </li>
</ul>

Answer 3

选择与菜单相关的子菜单

$(document).ready(function() {
    $(".dropdown-button").on("click", function() {
        $(this).find(".menu-dropdown").toggle();
    });
});

Answer 4

http://callmenick.com/post/slide-down-menu-with-jquery-and-css

查看这个优秀的代码; P xDD

使用css和jquery创建下拉菜单

4 个答案: