防止在单击表单登录时隐藏子菜单/单击父级li时更改背景颜色

Question

我有一个带有下拉列表的导航菜单，并且有两个atm问题：

1. 我有一个菜单，当您单击父级li时，它将显示其子菜单，而当您单击另一个父级li或页面中的其他位置时，它将隐藏。

在第一个li.parent上，我有一个登录表单。 我所输入的代码不允许我单击表格来输入登录详细信息。 如果我单击它，它将隐藏。

如何填写登录表单或单击它而不被隐藏？ 但是，当我单击页面上的其他位置时，它将关闭吗？

和

2）当我打开其子菜单之一时，我想让li.parent更改其背景颜色。 并在关闭子菜单时返回到他的正常背景色。

 //HEADER NAV-BAR SCRIPTS: //Show Submenus when clicking on Parent / Hide Submenus when clicking other parent/elsewhere function hide_sub_navs() { $('.parent ul').hide().removeClass("shown"); } $(function() { hide_sub_navs(); $(".parent").click(function(event) { event.stopPropagation(); var clicked = this; var sub_menu = $(clicked).find("ul"); if (sub_menu.hasClass("shown")) { sub_menu.hide().removeClass("shown"); } else { sub_menu.show().addClass("shown"); $(".parent").each(function() { var next_li = this; if (next_li != clicked) { $(next_li).find("ul").hide().removeClass("shown"); } }); } }); $(window).click(hide_sub_navs); }); 

 /** NAV MENU **/ div#nav-bar { float: right; display: inline-block; height: 34px; width: 40%; clear: right; padding: 0px 20px; background-color: #FFF; overflow: hidden; } /** Main Menu **/ div#nav-bar ul { position: absolute; right: 0px; top: 0; bottom: 0; padding: 0px auto; margin-top: 7px; margin-bottom: 0; margin-right: 10px; margin-left: auto; text-align: center; width: auto; height: 25px; list-style-type: none; font-family: Roboto, sans-serif; background-color: #FFF; display: block; } /** Titles **/ div#nav-bar ul li.title, li.parent { display: inline-block; height: 28px; width: auto; line-height: 28px; padding: 0px 5px; margin: 0px 5px; position: relative; border-radius: 3px; font-weight: 800; color: #005D96; font-size: 14px; } /*Change Main Menu li background when hovering*/ div#nav-bar ul li:hover { background-color: rgba(0, 184, 227, 0.1); } div#nav-bar ul li div#register li:hover { background-color: inherit; } div#nav-bar ul#mainmenu li a#home { display: inline-block; text-decoration: none; color: inherit; width: auto; height: 28px; margin: 0px 5px; padding: 0px 5px; font-weight: 800; color: #005D96; font-size: 14px; line-height: 28px; position: relative; border-radius: 3px; } /** Submenus **/ div#nav-bar ul ul { height: 0 auto; width: 0 auto; position: absolute; z-index: 1000; background-color: #004469; margin-top: 28px; margin-right: 0px; margin-left: 0px; padding: 0px 10px; border-radius: 3px; display: none; } div#nav-bar ul ul li.child-element { background-color: transparent; font-weight: lighter; font-size: 12.5px; color: #FFF; display: inline-block; float: left; height: 25px; width: auto; text-align: left; line-height: 30px; margin-top: 5px; margin-bottom: 0; margin-right: auto; margin-left: auto; padding: 0px 10px; border-radius: 3px; } div#nav-bar ul ul li a { display: inline-block; text-decoration: none; color: inherit; height: 27px; font-weight: lighter; color: #FFF; font-size: 12.5px; border-radius: 3px; } /** Submenu 1 - Account **/ div#nav-bar ul ul#submenu1 { width: 190px; height: 240px; } /*SUBMENU 1 - LOGIN FORM*/ form { border: none; font-weight: lighter; } form p { font-family: Roboto, sans-serif; color: #FFF; font-weight: lighter; font-size: 0.9em; text-align: center; line-height: 20px; height: 15px; float: center; margin-top: 10px; } form label b { font-family: Roboto, sans-serif; color: #FFF; font-weight: lighter; font-size: 0.8em; line-height: 20px; height: 15px; float: left; } input[type=text], input[type=password] { width: 100%; margin: 0px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } button { background-color: rgba(0, 208, 244, 1); color: white; font-size: 0.8em; padding: 5px 5px; margin-top: 10px; margin-bottom: 0px; border: none; cursor: pointer; width: 30%; float: right; } div#rememberme { font-size: 0.8em; font-family: Roboto, sans-serif; color: #FFF; font-weight: lighter; float: left; padding: 0 10px; margin: 8px 0; } div#forgotpsw p { height: 20px; width: auto; position: relative; top: -10px; float: right; font-family: Roboto, sans-serif; font-size: 0.8em; font-weight: lighter; color: #FFF; line-height: 15px; } div#forgotpsw p a.forgot { display: inline-block; height: auto; text-decoration: underline; width: auto; font-family: Roboto, sans-serif; font-size: 1em; font-weight: lighter; padding: 0px 2px; } /*Register*/ div#register { display: inline-block; margin-top: -10px; width: 210px; height: 50px; position: relative; left: -10px; border-radius: 3px; background-color: #00598A; font-weight: lighter; } div#register li p.register { font-size: 0.85em; font-family: Roboto, sans-serif; color: #FFF; font-weight: lighter; margin: 0px 10px;; height: 50px; line-height: 25px; text-align: center; } div#register li p a.register { display: inline-block; margin: 0; padding: 0; text-decoration: underline; text-decoration-color: #FFF; font-family: Roboto, sans-serif; font-size: 1em; } .container { padding: 0; padding-bottom: 10px; height: 170px; } span.psw { float: right; padding-top: 16px; } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } } /** Submenu 2 - Manage Bookings **/ div#nav-bar ul ul#submenu2 { width: 170px; height: 130px; } /** Submenu 3 - Support **/ div#nav-bar ul ul#submenu3 { width: 140px; height: 70px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="nav-bar"> <ul id="mainmenu"> <li class="title"><a href="index.html" id="home" >Home</a></li> <li class="parent">Account <ul id="submenu1"> <!--Login Form--> <form> <div class="container"> <p>Log-in to Access your Account</p> <label><b>Username</b></label> <input type="text" placeholder="Enter Username" name="uname" required> <label><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <button type="submit">Login</button> <div id="rememberme"> <input type="checkbox" checked="checked ">Remember me </div> <!--Forgot Password--> <div id="forgotpsw"> <li class="forgot"> <p>Forgot <a class="forgot" href="forgot.html">Password</a> ?</p> </li> </div> </div> </form> <!--Register--> <div id="register"> <li> <p class="register">Don't have an account yet? Click <a class="register" href="register.html">here</a> to Register.</p> </li> </div> </ul> </li> <li class="parent">Manage Bookings <ul id="submenu2"> <li class="child-element"><a href="itineraries.html">Itineraries</a></li> <li class="child-element"><a href="flights.html">Manage my Flights</a></li> <li class="child-element"><a href="hotelbookings.html">Manage Hotel Bookings</a></li> <li class="child-element"><a href="travel-documents.html">Travel Documents</a></li> </ul> </li> <li class="parent">Support <ul id="submenu3"> <li class="child-element"><a href="support.html">Customer Service</a></li> <li class="child-element"><a href="feedback.html">Feedback</a></li> </ul> </li> </ul> </div> </body> 

Answer 1

好的，我想出了这段代码，它能很好地工作吗？ 它在Boostrap Studio上对我有用。

将html li.parent元素更改为：

<li id="account" class="parent">Account
<li id="bookings" class="parent">
<li id="support" class="parent">Support

我为每个父母li添加了一个id。 另外，每个子菜单都有一个ID（＃submenu1，＃submenu2，＃submenu3）。

这是我用来在打开子菜单时单击该脚本的脚本，单击该子菜单中的任意位置时，如果我单击其他父级或html文件中的其他任何位置，则将其关闭。

$('html, .parent').click(function() {
$('#submenu1').hide();
});

$('#mainmenu, #submenu1').click(function(event) {
event.stopPropagation();
});

$('#account').click(function(event) {
$('#submenu1').toggle();
});



$('html, .parent').click(function() {
$('#submenu2').hide();
});

$('#mainmenu, #submenu2').click(function(event) {
event.stopPropagation();
});

$('#bookings').click(function(event) {
$('#submenu2').toggle();
});



$('html, .parent').click(function() {
$('#submenu3').hide();
});

$('#mainmenu, #submenu3').click(function(event) {
event.stopPropagation();
});

$('#support').click(function(event) {
$('#submenu3').toggle();
});