下拉菜单不适用于JavaScript
[英]Dropdown menu doesn't work with JavaScript
问题描述
I tried to make a dropdown menu with a JavaScript because the html gets generated. 
我试图用JavaScript制作下拉菜单，因为会生成html。 So I got help from some users but it's not working properly yet. 因此，我从一些用户那里获得了帮助，但目前尚无法正常工作。
This is my menu now: https://jsfiddle.net/rxLg0bo4/5/ 现在这是我的菜单： https : //jsfiddle.net/rxLg0bo4/5/
As you can see in the jsFiddle the menu doesn't disappear when I leave the area. 正如您在jsFiddle中看到的那样，当我离开该区域时，菜单不会消失。 And it should also change, when I go from menu1 to menu2. 当我从menu1转到menu2时，它也应该更改。
As you can see, I don't really have a smart structure for building a dropdown menu, but it should work as well. 如您所见，我确实没有构建下拉菜单的智能结构，但是它也应该可以正常工作。 I'm working with ASP.NET so this code gets generated. 我正在使用ASP.NET，因此会生成此代码。
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<div id="pnlMenu"> <a class="menu_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="menu_link active_menu_link" href="Index.aspx?category=4">menu3</a><a class="menu_link" href="Index.aspx?category=5">menu4</a><a class="menu_link" href="Index.aspx?category=6">menu5</a><a class="menu_link last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>
</div>
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
<a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>
</div>
</div>
</nav>
</div>
This is my JavaScript that I have now: 这是我现在拥有的JavaScript：
$("#pnlMenu .menu_link").mouseover(function () {
$(".submenu_panel").css("height", "100px");
$("#pnlSubmenu").slideToggle('fast');
});
That's my aspx code, as you can see I already added the jquery to it: 那是我的aspx代码，如您所见，我已经在其中添加了jQuery：
<head runat="server">
<title> 2.0 Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Styles/StyleSheet.css" />
<link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon" />
<!-- Scripts -->
<script src="/Scripts/auto-rotate.js"></script>
<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/key-nav.js"></script>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<header>
<nav>
<asp:HyperLink ID="lnkLogin" NavigateUrl="~/Pages/Account/Login.aspx" runat="server">Login</asp:HyperLink>
<asp:LinkButton ID="lnkLogout" runat="server" OnClick="lnkLogout_Click">Logout</asp:LinkButton>
</nav>
<nav>
<asp:Label ID="litStatus" runat="server" Text=""></asp:Label>
</nav>
</header>
<div id="wrapper_secondary">
<div id="wrapper_logo">
<a href="/Index.aspx">
<div id="logo"></div>
</a>
</div>
<div id="wrapper_headermenu">
<a href="/Pages/Management/Management.aspx" id="management_link">Management</a>
<asp:HyperLink ID="lnkRegister" NavigateUrl="~/Pages/Account/Register.aspx" CssClass="header_hyperlink" runat="server">Register</asp:HyperLink>
<a href="#" id="contact_link">Kontakt</a>
<a href="#">
<label>
Fullscreen
<asp:CheckBox id="fullscreen_chbx" OnCheckedChanged="fullscreen_chbx_Click" runat="server" AutoPostBack="true"/></label>
</a>
</div>
</div>
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<script type="text/javascript">
$('.menu_link').hover(function () {
$("#pnlSubmenu").slideDown('slow');
});
$('#pnlSubmenu').on("mouseenter", function () {
$(this).show();
});
$('#pnlSubmenu').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("#pnlSubmenu").hide();
});
</script>
<asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
<asp:Panel ID="pnlSubmenu" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</nav>
</div>
4 个解决方案
解决方案1
0 2015-08-17 07:22:19
When using descendant selector, you can not use id selector for the first element. 使用后代选择器时，不能将id选择器用于第一个元素。 css like below will not work. 像下面的CSS将无法正常工作。
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
解决方案2
0 2015-08-17 07:24:32
Check this new one link https://jsfiddle.net/rxLg0bo4/9/ 检查这个新的链接https://jsfiddle.net/rxLg0bo4/9/
$('.menu_link').hover(function () {
$("#pnlSubmenu").slideDown('slow');
});
$('#pnlSubmenu').on("mouseenter", function () {
$(this).show();
});
$('#pnlSubmenu').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("#pnlSubmenu").hide();
});
解决方案3
0 2015-08-17 07:26:37
first, I have to mention that you can use the bootstrap dropdown it will make your life easier, second I came up with a couple of changes you can make, it's not perfect, but it will get you there: 首先，我不得不提到，您可以使用bootstrap下拉菜单，这将使您的生活更轻松；其次，我提出了可以进行的一些更改，虽然这并不完美，但可以使您达到目标：
HTML 的HTML
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<div id="pnlMenu"> <a class="link1 menu_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="link3 menu_link active_menu_link" href="Index.aspx?category=4">menu3</a><a class="menu_link" href="Index.aspx?category=5">menu4</a><a class="menu_link" href="Index.aspx?category=6">menu5</a><a class="menu_link last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div id="link1" class="submenu_panel" style="height:0px"> <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>
</div>
<div id="link3" class="submenu_panel" style="height:0px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
<a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>
</div>
</div>
</nav>
</div>
you can see here that I added class link1 and link3 to two menu links, you should fill the rest, and added the same values as id for the dropdown part, then on the mouse over event I will read this value and call the appropriate id to show. 您可以在此处看到我在两个菜单链接中添加了类link1和link3，您应该填充其余部分，并为下拉部分添加与id相同的值，然后在鼠标悬停事件上，我将读取该值并调用相应的id显示。 and as for why the menu wasn't disappearing, you need a mouseout event as follows: 至于为什么菜单没有消失，您需要如下所示的mouseout事件：
$("#pnlMenu").mouseover(function (event) {
var x = $(event.target).attr('class').split(' ')[0];
console.log(x)
$("#"+x).css("height", "100px");
$("#pnlSubmenu").slideToggle('fast');
});
$("#pnlMenu").mouseout(function (event) {
var x = $(event.target).attr('class').split(' ')[0];
console.log(x)
$("#"+x).css("height", "0px");
$("#pnlSubmenu").slideToggle('fast');
});
like I said, this is a draft to get you going, this is not a perfect solution. 就像我说的，这是帮助您前进的草案，这不是一个完美的解决方案。 I hope this helps 我希望这有帮助
解决方案4
0 2015-08-17 08:00:46
Simple Jquery can do the trick 简单的Jquery可以解决问题
function showE() { $("#h1").removeClass("hide"); } function don() { if ($('#h1').is(':hover')) { $("#h1").removeClass("hide"); } else { $("#h1").addClass("hide"); } }
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="h" href="#" onmouseover="showE()" onmouseout="don()">show</a> <div id="c" onmouseover="showE();" onmouseout="javascript:$('#h1').addClass('hide');"> <div id="h1" style="float: inherit; overflow: hidden; position: absolute;height:15px; background-color: Gray; border-radius: 0 5px 5px 5px;" class="hide"> Enter your email if you have posted this ad </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.