使用 jQuery 的下拉菜单答案

【问题标题】：Dropdownmenu using jQuery使用 jQuery 的下拉菜单
【发布时间】：2016-03-24 12:44:56
【问题描述】：

所以我正在尝试使用 jQuery 在网站上为我的 topnav 制作一个下拉菜单，并且我已经设法获得了我想要的设计和功能，但是当我不希望菜单在我悬停时隐藏时它，我不知道如何解决这个问题。

<nav id="topnav">
  <ul>
    <li><a href="index.htm">Hem</a></li>
    <li class="has-sub"><a href="#">Information &#x25BE;</a>
      <ul class="dropdown">
        <li><a href="#">Om produkterna</a></li>
        <li><a href="#">Om oss</a></li>
        <li><a href="#">Varför detta?</a></li>
      </ul>
    </li>
    <li><a href="handla.htm">Handla</a></li>
  </ul>
</nav>

nav {
    background-color: rgb(100,155,255);
    border: 1px solid rgb(175, 175, 175);
    border-radius: 0 0 1em 1em;
}
nav ul {
    position: relative;
    display: inline-table;
    padding: 0 20px;
}
nav ul:after {
    content: "";
    clear: both;
    display: block;
}
nav ul li {
    display: table-cell;
}
nav ul li a {
    display: block;
    padding: 0.5em 1.5em;
    color: black;
    font-size: 1.4em;
}
nav ul li a:hover{
    text-decoration: none;
}
nav ul li ul li{
    display: block;
}
nav ul li ul li a{
    font-size: 0.857em;
  text-decoration: none;
}
.highlight{
    background-color: rgb(175,175,175);
    border-radius: 0 0 1em 1em;
    opacity: 0.5;
}
.has-sub{
    position: relative;
    display: inline-block;
}
.dropdown{
    background-color: rgb(100,155,255);
    z-index: 100;
    position: absolute;
    text-align: left;
    margin-top: 1em;
    margin-left: 0.8em;
    border: 1px solid rgb(175, 175, 175);
    border-top: none;
    border-radius: 0 0 1em 1em;
}

//Highlight for menu
$("#topnav").on("mouseenter", "li", function(){
    if ($(this).hasClass("has-sub")) {
        return;
    }
    $(this).addClass("highlight");
});
$("#topnav").on("mouseleave", "li", function(){
    if ($(this).hasClass("has-sub")) {
        return;
    }
    $(this).removeClass("highlight");
});

//Dropdown for topnav
$(".dropdown").hide();
$("#topnav").on("mouseenter", ".has-sub", function(){
    $(this).find(".dropdown").show();
});
$("#topnav").on("mouseleave", ".has-sub", function(){
    $(this).find(".dropdown").hide();
});

感谢任何答案，干杯！

【问题讨论】：

如果你只能用 css 来实现它，你为什么要用 jquery 来做一个下拉菜单..

标签： jquery html css nav dropdown

【解决方案1】：

正如 C Travel 所说，您可以使用纯 css 将其存档，但如果您想要在 jQuery 中，您可以添加：

  $(".dropdown").on("mouseenter", function(){
        $(this).show();
  });

并更改 .dropdown 的 css 样式

margin-top: 1em;

到

padding-top: 1em;

它有效

【讨论】：

【解决方案2】：

检查 FIDDLE： https://jsfiddle.net/o7jvpxqd/

添加这个 Jquery：

(function($){

        //cache nav
        var nav = $("#topnav");

        //add indicators and hovers to submenu parents
        nav.find("li").each(function() {
            if ($(this).find("ul").length > 0) {



                //show subnav on hover
                $(this).mouseenter(function() {
                    $(this).find("ul").stop(true, true).slideDown();
                });

                //hide submenus on exit
                $(this).mouseleave(function() {
                    $(this).find("ul").stop(true, true).slideUp();
                });
            }
        });
    })(jQuery);

【讨论】：

【解决方案3】：

使用这个，这是 HTML 而不是 Javascript 这是我做的事情：

<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: #FF0000;
    color: white;
  }
</style>
<body>
  <div class="topnav">
    <a class="active" href="/site">Home</a>
    <a href="/staff">Our Staff</a>
    <a href="/applictions">Application</a>
    <a href="/Games">Games</a>
    <a href="https://discord.gg/S4aBgTz">Discord</a>
    <a href="/FAQ">FAQ</a>
    <a href="/Code">Code Of Conduct</a>
  </div>

  <center>
    <div style="padding-left:16px">
      <h2></h2>
      <p></p>
    </div>
  </center>
</body>

【讨论】：