jQuery切换隐藏这么快？

Question

我想为我的 "mega menu"

使用 jQuery hover()+toggle()

有我的基本结构

我觉得切换到隐藏的速度太快了？

因为我无法像演示中那样点击google "A content"

**

$(function() {
    $(".sub_menu").hide();
    $("#menuA").hover(function() {
        $("#menuA_submenu").toggle();
    });
});

.menu{
  display:flex;
  list-style:none;
}

.menu li {
  flex:1;
  background:#f35;
  padding: 1rem;
  margin:1rem;
}

.content{
  display:none;
  background:#fcc;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>
<body>

  <ul class="menu">
    <li id="menuA"><a href="#">A</a></li>
    <li id="menuB"><a href="#">B</a></li>
    <li id="menuC"><a href="#">C</a></li>
  </ul>
  
  <div class="content" id="menuA_submenu">A content
  <hr>
  <a href="http://google.com">google</a></div>
  <div class="content" id="menuB_submenu">B content</div>
  <div class="content" id="menuB_submenu">C content</div>
  
</body>
</html>

**

Answer 1

也许可以尝试添加参数来切换功能

$("#menuA_submenu").toggle(1000);

Answer 2

你可以简单地使用这个：

$(function() {
    $(".sub_menu").hide();
    $("#menuA , .content").hover(function() {
        $("#menuA_submenu").toggle();
    });
});

.menu{
  display:flex;
  list-style:none;
}

.menu li {
  flex:1;
  background:#f35;
  padding: 1rem;
  margin:1rem;
}

.content{
  display:none;
  background:#fcc;
  margin-top:-32px
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>
<body>

  <ul class="menu">
    <li id="menuA"><a href="#">A</a></li>
    <li id="menuB"><a href="#">B</a></li>
    <li id="menuC"><a href="#">C</a></li>
  </ul>
  
  <div class="content" id="menuA_submenu">A content
  <hr>
  <a href="http://google.com">google</a></div>
  <div class="content" id="menuB_submenu">B content</div>
  <div class="content" id="menuB_submenu">C content</div>
  
</body>
</html>

Answer 3

像这样使用slideToggle('slow')，

$(function() {
    $(".sub_menu").hide();
    $("#menuA").hover(function() {
        $("#menuA_submenu").slideToggle('slow');
    });
});

.menu{
  display:flex;
  list-style:none;
}

.menu li {
  flex:1;
  background:#f35;
  padding: 1rem;
  margin:1rem;
}

.content{
  display:none;
  background:#fcc;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>
<body>

  <ul class="menu">
    <li id="menuA"><a href="#">A</a></li>
    <li id="menuB"><a href="#">B</a></li>
    <li id="menuC"><a href="#">C</a></li>
  </ul>
  
  <div class="content" id="menuA_submenu">A content
  <hr>
  <a href="http://google.com">google</a></div>
  <div class="content" id="menuB_submenu">B content</div>
  <div class="content" id="menuB_submenu">C content</div>
  
</body>
</html>

Answer 4

$(document).ready(function() {
  var thetimeout;
  $('#menuA,.content').mouseover(function() {
    clearTimeout(thetimeout);
    $('#menuA_submenu').slideDown();
  });
  $('#menuA,.content').mouseleave(function() {
    thetimeout = setTimeout(function() {
      $('#menuA_submenu').slideUp();
    }, 1000);
  });
});

.menu {
  display: flex;
  list-style: none;
}

.menu li {
  flex: 1;
  background: #f35;
  padding: 1rem;
  margin: 1rem;
}

.content {
  display: none;
  background: #fcc;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>

<body>

  <ul class="menu">
    <li id="menuA"><a href="#">A</a></li>
    <li id="menuB"><a href="#">B</a></li>
    <li id="menuC"><a href="#">C</a></li>
  </ul>

  <div class="content" id="menuA_submenu">A content
    <hr>
    <a href="http://google.com">google</a>
  </div>
  <div class="content" id="menuB_submenu">B content</div>
  <div class="content" id="menuB_submenu">C content</div>

</body>

</html>

Answer 5

你的最终目标是什么？您希望如何呈现图片？

悬停 $("#menuA") 比 $("#menuA_submenu") 会显示。光标在进入$("#menuA_submenu")之前已经离开了$("#menuA")，所以不再悬停。

提出几个解决方案：

子菜单必须与菜单项无缝衔接。

$(function() {
    $(".sub_menu").hide();
    $("#menuA, #menuA_submenu").hover(function() {
        $("#menuA_submenu").toggle();
    });
});

.menu{
  display:flex;
  list-style:none;
  margin-bottom: 0;  /*new*/
}

.menu li {
  flex:1;
  background:#f35;
  padding: 1rem;
  margin:1rem;
  margin-bottom: 0;  /*new*/
}

.content{
  display:none;
  background:#fcc;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

  <ul class="menu">
    <li id="menuA"><a href="#">A</a></li>
    <li id="menuB"><a href="#">B</a></li>
    <li id="menuC"><a href="#">C</a></li>
  </ul>  
  <div class="content" id="menuA_submenu">A content
   <hr>
 <a href="http://google.com">google</a>
  </div>
  <div class="content" id="menuB_submenu">B content</div>
  <div class="content" id="menuB_submenu">C content</div>
  
</body>
</html>

将悬停更改为单击触发器。

$(函数() {

$(".sub_menu").hide();

$("#menuA").click(function() {

    $("#menuA_submenu").toggle();

});

});

悬停时，显示相应的子菜单，直到悬停到其他按钮。（每个悬停行为可以合并为一个。）

$(函数() {

$(".sub_menu").hide();

$("#menuA").mouseenter(function() {

    $(".content").hide();

    $("#menuA_submenu").show();

});

$("#menuB").mouseenter(function() {

    $(".content").hide();

    $("#menuB_submenu").show();

});

});

jQuery切换隐藏这么快？

jQuery toggle hidden so fast?

javascript

syntax

jquery

toggle