ブートストラップナビバー3レベルメニューホバー問題

Bootstrap 3 dropdown sub menu missingを参照してブートストラップメニューを作成しましたが、少し違った方法で作成しました。メニューやサブメニューをホバリングするとうまくいきます。ただし、サブメニューがあるメニュー項目をクリックして他のメニューに移動すると、両方のメニューのサブメニューが開いたままになります（前のサブメニューはクリック時に閉じられますが、新しいメニューでは上書きされません）。私はこの問題を、サブメニューを持つメニュー上でクリックイベントを追加することで解決しようとしました。私の問題を部分的に修正しました。以前にクリックされた（隠されていない）メニューのサブメニューを閉じますが、前のメニューの背景色は元の色に変更されません。ここに私のjqueryの修正コメント付き作業コードを追加しています。このコードを任意のHTMLファイルにコピーして実行してください。ブートストラップナビバー3レベルメニューホバー問題

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" crossorigin="anonymous"></script> 
</head> 
<body> 
<style typ="text/css"> 
.nav > li > a, .dropdown-menu > li > a, .nav .open > a 
{ 
    height: auto; 
    display: block; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    padding-left: 5px; 
    padding-right: 10px; 
    text-decoration: none; 
    color: #284e36; 
    line-height: normal; 
    background-color: transparent; 
    border-bottom: 2px solid white; 
} 

.nav > li, .dropdown-menu > li, .nav .open 
{ 
    color: #284e36; 
    border: none; 
    background-color: #F9F9F9; 
} 

.nav > li > a:active, .dropdown-menu > li > a:active, .nav .open > a:active, .nav > li > a:focus, .dropdown-menu > li > a:focus, .nav .open > a:focus 
{ 
    background-color: #CCCCCC; 
    color: #001e06; 
    border: none; 
    border-bottom: 2px solid white; 
    margin-left:0; 
} 

.nav > li > a:hover, .dropdown-menu > li > a:hover, .nav .open > a:hover 
{ 
    background-color: #CCCCCC; 
    color: #001e06; 
    border: none; 
    border-bottom: 2px solid white; 
    margin-left:0; 
} 

.navbar-inverse 
{ 
    background-color: white; 
    border-color: white; 
} 

.navbar 
{ 
    border-radius: 0px; 
} 

.dropdown-menu 
{ 
    padding: 0; 
} 

/*https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing*/ 
.dropdown-submenu { 
    position:relative; 
} 
.dropdown-submenu:hover>.dropdown-menu { 
    display:block; 
} 
/* For desktop and ipad */ 
@media all and (min-width: 768px) 
{ 

    .dropdown-menu 
    { 
     margin: 0; 
     left: 100%; 
     top: 0; 
    } 

    .nav > li > a, .dropdown-menu > li > a, .nav .open > a 
    { 
     padding-top: 4px; 
     padding-bottom: 4px; 
    } 
} 

@media all and (max-width: 767px) 
{ 

    .dropdown-menu 
    { 
     left: 20%; 
     top: 90%; 
     width: 100%; 
     border: 1px solid white; 
    } 
} 

</style> 
<div class="navbar navbar-inverse navbar-default" style="width:300px"> 
    <ul class="nav"> 
     <li><a href="Home.aspx" >Home</a></li> 
     <li class="dropdown-submenu"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Menu 1 <span class="caret"></span> </a> 
     <ul class="dropdown-menu" > 
      <li><a href="SubMenu1.aspx">SubMenu 11</a></li> 
      <li class="dropdown-submenu"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Sub Menu 12<span class="caret"></span> </a> 
       <ul class="dropdown-menu" > 
        <li><a href="SubMenu121.aspx">Sub Menu 121</a></li> 
        <li><a href="SubMenu122.aspx">Sub Menu 122</a></li> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Sub Menu 13<span class="caret"></span> </a> 
       <ul class="dropdown-menu" > 
        <li><a href="SubMenu131.aspx">Sub Menu 131</a></li> 
        <li><a href="SubMenu132.aspx">Sub Menu 132</a></li> 
       </ul> 
      </li> 
      <li><a href="SubMenu14.aspx">Sub Menu 14</a></li> 
      <li><a href="SubMenu15.aspx">Sub Menu 15 </a></li> 
      <li><a href="SubMenu16.aspx">Sub Menu 16</a></li> 
      <li><a href="SubMenu17.aspx">Sub Menu 17</a></li> 
     </ul> 
     </li> 
     <li class="dropdown-submenu"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Menu 2<span class="caret"></span> </a> 
     <ul class="dropdown-menu" > 
      <li><a href="SubMenu21.aspx">Sub Menu 21</a></li> 
      <li><a href="SubMenu22.aspx">Sub Menu 21</a></li> 
      <li><a href="SubMenu23.aspx">Sub Menu 23</a></li> 
     </ul> 
     </li> 
     <li class="dropdown-submenu"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Menu 3<span class="caret"></span> </a> 
     <ul class="dropdown-menu" > 
      <li><a href="SubMenu31.aspx">Sub Menu 31</a></li> 
      <li><a href="SubMenu32.aspx">Sub Menu 32</a></li> 
      <li><a href="SubMenu33.aspx">Sub Menu 33</a></li> 
     </ul> 
     </li> 
     <li><a href="Menu.aspx" >Menu 4</a></li> 
     <li><a href="Menu.aspx" >Menu 5</a></li> 
    </ul> 
</div> 
<!-- 
<script type="text/javascript"> 
      $(document).ready(function() { 
       $('.dropdown-submenu').hover(function() { 
        $(this).click(); 
       }); 
      }); 
</script> 
--> 
</body>

出典

2017-07-07 Rajesh Patel

私はjqueryのコードの下に追加することで問題を解決しました。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.dropdown-toggle').hover(function() { 
      $(this).css('background-color', '#CCCCCC'); 
      $(this).click(); 
     }); 
    }); 

    $('.dropdown-submenu').mouseleave(function() { 
     $(this).find('.dropdown-toggle').css('background-color', '#F9F9F9').attr('aria-expanded', false); 
     $(this).removeClass('open'); 
    });  
</script>

出典

2017-07-25 11:03:07

私は正しくあなたを理解しています。これをチェックする必要があります。

$('li').hover(function() { 
     $(this).click(); 
});

DEMOhttps://jsfiddle.net/princesodhi/pegzte0h/

出典

2017-07-07 09:00:32

おかげで（王子）の交尾、それは私の問題を解決し –

ブラボーは、あなたは答えを投票してくださいだろうか？ –

もう1つ問題があります。サブメニューを持たない項目に移動すると、サブメニューを持つメニューの背景色が暗くなります。あなたは助けることができますhttps://stackoverflow.com/users/1636377/prince-sodhi –

ブートストラップナビバー3レベルメニューホバー問題

答えて

関連する問題