下拉菜单不适用于JavaScript
[英]Dropdown menu doesn't work with JavaScript
问题描述
我试图用JavaScript制作下拉菜单，因为会生成html。 因此，我从一些用户那里获得了帮助，但目前尚无法正常工作。
现在这是我的菜单： https : //jsfiddle.net/rxLg0bo4/5/
正如您在jsFiddle中看到的那样，当我离开该区域时，菜单不会消失。 当我从menu1转到menu2时，它也应该更改。
如您所见，我确实没有构建下拉菜单的智能结构，但是它也应该可以正常工作。 我正在使用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>
这是我现在拥有的JavaScript：
$("#pnlMenu .menu_link").mouseover(function () {
$(".submenu_panel").css("height", "100px");
$("#pnlSubmenu").slideToggle('fast');
});
那是我的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
使用后代选择器时，不能将id选择器用于第一个元素。 像下面的CSS将无法正常工作。
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
解决方案2
0 2015-08-17 07:24:32
检查这个新的链接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
首先，我不得不提到，您可以使用bootstrap下拉菜单，这将使您的生活更轻松；其次，我提出了可以进行的一些更改，虽然这并不完美，但可以使您达到目标：
的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>
您可以在此处看到我在两个菜单链接中添加了类link1和link3，您应该填充其余部分，并为下拉部分添加与id相同的值，然后在鼠标悬停事件上，我将读取该值并调用相应的id显示。 至于为什么菜单没有消失，您需要如下所示的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');
});
就像我说的，这是帮助您前进的草案，这不是一个完美的解决方案。 我希望这有帮助
解决方案4
0 2015-08-17 08:00:46
简单的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.