Menu
I want to use jQuery hover()+toggle() for my "mega menu"
there are my basic structure
I feel the toggle to hidden too fast?
because I can't click the google like in the demo "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>**
623
asked Aug 11 '26 08:08
What is your ultimate goal? How do you hope to present the picture?
Hover $("#menuA") than $("#menuA_submenu") will be displayed. The cursor has left $("#menuA") before entering $("#menuA_submenu"), so it is no longer hovered.
Suggest a few solutions:
$(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>Change hover to click trigger.
$(function() {
$(".sub_menu").hide();
$("#menuA").click(function() {
$("#menuA_submenu").toggle();
});
});
When hover, display the corresponding submenu until hover to other buttons. (Each hover behavior can be merged into one.)
$(function() {
$(".sub_menu").hide();
$("#menuA").mouseenter(function() {
$(".content").hide();
$("#menuA_submenu").show();
});
$("#menuB").mouseenter(function() {
$(".content").hide();
$("#menuB_submenu").show();
});
});
161
answered Aug 12 '26 23:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With