防止窗体上，当点击子菜单隐藏登录父李点击

我有一个具有下拉列表一个导航菜单时/更改背景颜色，和我有两个问题ATM：防止窗体上，当点击子菜单隐藏登录父李点击

我有菜单当你点击一个父里，它会显示其子菜单，当你点击另一位家长里或其他地方的页面，它会隐藏。

在第一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>

来源

2016-11-26 meisherman

编辑您的问题，并按CTRL + M并粘贴所有的代码到代码段框 – mlegg

好吧，我想出了这个代码，它将很好地工作？它在Boostrap Studio上为我工作。

改变的HTML li.parent元素：

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

我添加一个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(); 
});

来源

2016-11-29 00:57:24 meisherman

防止窗体上，当点击子菜单隐藏登录父李点击

回答

相关问题