Question

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

<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();
});

任何答案都表示赞赏，欢呼！

Answer 1

正如所说的C Travel你可以用纯css归档这个，但如果你想在jQuery中，你可以添加：

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

并从

更改.dropdown的css样式

margin-top: 1em;

到

padding-top: 1em;

它有效

Answer 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);

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

Dropdownmenu使用jQuery

3 个答案: