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

标签 javascript jquery html css

我有一个带有下拉列表的导航菜单，我有两个问题 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>

最佳答案

好的，我想出了这段代码，它能正常工作吗？？它在 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();
});

关于javascript - 单击表单登录时防止子菜单隐藏/单击父 li 时更改背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40821911/

上一篇：javascript - ScrollMagic pin 更改固定元素的初始 Y 位置

下一篇：CSS改变网页图标颜色，html自定义wordpress插件

相关文章：

javascript - Jquery 延迟变化

jquery - 当使用悬停效果滚动 CSS 菜单时，它会闪烁

java - JavaScript 如何将未加引号的纯表达式识别为 RegExp 对象？

javascript - 用于计算大基数的 LogLog 和 HyperLogLog 算法

JQuery 循环遍历外部 div

javascript - 使用 AngularJS 在文本框中需要两个词

javascript - 如何将输入框中的值传递给另一个输入框

javascript - Bootstrap 3中Datatables插件显示格式的自定义

javascript - 链接到同一页面上的 anchor 减去一些像素

jquery - 替代 fadeOut() 以创建脉冲效果

©2024 IT工具网  联系我们