Question

我试图用jquery制作一个菜单，但是当我将鼠标悬停在菜单上时＃34;菜单＆＃34;然后单击其中一个按钮向上滑动。谁知道如何解决这个问题？这是我的Jquery：

$(document).ready(function() {
  $(".slide").hide();
  $("#menu").hover(function() {
    $(".slide").slideToggle("slow");
  });
  $(".logo").click(function() {
    window.location = 'index.html';
  });
  $(".logo").hover(function() {

  });
});

以下是完整代码： https://jsfiddle.net/lollz4/dh1kLh8L/

P.S。如果我做错了什么，我很抱歉。

Answer 1

在菜单周围添加一个额外的包装器，然后检查该元素上的悬停状态：

＆＃13;

$(document).ready(function() {
  $(".slide").hide();
  $("#menu-wrapper").hover(function() {
    $(".slide").slideToggle("slow");
  });
  $(".logo").click(function() {
    window.location = 'index.html';
  });
  $(".logo").hover(function() {

  });
});

＆＃13;

* {
  margin-top: 0px;
  margin-left: 0px;
}
body {
  background-color: #EBEDEF;
}
.page {
  background: white;
  width: 100%;
  height: 52em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 2px;
  position: absolute;
  margin: 0;
  padding: 0;
}
#menu {
  display: block;
  position: absolute;
  left: 0em;
  top: 0em;
  background-color: #2E4053;
  border: none;
  padding: 15px 32px;
  font-size: 16px;
  clear: both;
}
.slide {
  display: block;
  left: 0em;
  top: 0em;
  position: relative;
  background-color: #2E4053;
  border: none;
  padding: 15px 32px;
  font-size: 16px;
  clear: both;
}
.logo {
  height: 3em;
  width: 100%;
  background-color: #ABB2B9;
  padding: 0px;
  margin: 0px;
  position: fixed;
}
div img {
  margin: auto;
  width: 8em;
  height: 3em;
  background-color: #607D8B;
  border-radius: 2px;
  display: block;
  padding-top: 0;
}
div img:hover {
  opacity: 0.80;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="scripts.js"></script>
  <title>Stefan's Website</title>
</head>

<body>
  <div class="logo">
    <img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
    <div id="menu-wrapper">
      <button id="menu">
        Menu
      </button>
      <button class="slide">
        Pagina1
      </button>
      <button class="slide">
        Pagina2
      </button>
      <button class="slide">
        Pagina3
      </button>
    </div>
  </div>
  <!--<div class="page">
  </div>-->
</body>

</html>

＆＃13;

尝试点击时菜单不会保持打开状态

1 个答案: