防止サブメニュー隠蔽親Liは

をクリックしたときに/変更背景色をサインインするフォームをクリックしたときに、私はドロップダウンリストを持っているナビゲーションメニューを持っている、と私は2つの問題を抱えているがATM：防止サブメニュー隠蔽親Liは

私が持っています親liをクリックするとそのサブメニューが表示され、別の親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>

出典

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

Iは各親のLiにIDを追加しました。また、各サブメニューにはid（＃サブメニュー1、＃サブメニュー2、＃サブメニュー3）があります。

これは、私がその中のどこかをクリックしている間にサブメニューを開いたままにしておき、別の親をクリックするか、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

防止サブメニュー隠蔽親Liは

答えて

関連する問題