マルチレベルのブートストラップメニューは、最初のレベルのみ

私は、ブートストラップ3とmultelevelメニューを作成しようとしているが、マークアップがマルチレベルのブートストラップメニューは、最初のレベルのみ

である理由、それは仕事と把握するブートストラップの不十分な知識を持って取得することはできませんを示します

<div class="dropdown"> 
    <a role="button" data-toggle="dropdown" class="btn btn-primary" data-target="" href="">Y<span class="caret"></span></a> 
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
    <li class="dropdown-submenu"> 
     <a href="#" tabindex="-1">foo</a>   
     <ul class="dropdown-menu"> 
      <li> 
       <a href="">bar</a> 
      </li> 
     </ul> 
    </li> 
    </ul> 
</div>

とCSSやJSは私の期待は、私が最初のメニュー（「Y」）を開いたときに私は開くことができる新しいメニュー項目「foo」を見ることができるということです

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

次のように含まれていますコードは、私がthe example後here

出典

2017-03-21 Rune FS

あなたが例からCSSをコピーする必要が行う必要があり、それが動作します..：作業スニペット以下を参照してください.http：//www.bootply.com/rzYsRfVGmk – Chiller

CSSスタイルを含めましたか？ – SrAxi

そのスニペットのCSSは、マルチレベルのドロップダウンに関するすべてのトリックをしているようです。

.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu>.dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    -webkit-border-radius: 0 6px 6px 6px; 
 
    -moz-border-radius: 0 6px 6px; 
 
    border-radius: 0 6px 6px 6px; 
 
} 
 

 
.dropdown-submenu:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
.dropdown-submenu>a:after { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
    border-width: 5px 0 5px 5px; 
 
    border-left-color: #ccc; 
 
    margin-top: 5px; 
 
    margin-right: -10px; 
 
} 
 

 
.dropdown-submenu:hover>a:after { 
 
    border-left-color: #fff; 
 
} 
 

 
.dropdown-submenu.pull-left { 
 
    float: none; 
 
} 
 

 
.dropdown-submenu.pull-left>.dropdown-menu { 
 
    left: -100%; 
 
    margin-left: 10px; 
 
    -webkit-border-radius: 6px 0 6px 6px; 
 
    -moz-border-radius: 6px 0 6px 6px; 
 
    border-radius: 6px 0 6px 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="dropdown"> 
 
    <a role="button" data-toggle="dropdown" class="btn btn-primary" data-target="" href="">Y<span class="caret"></span></a> 
 
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
 
    <li class="dropdown-submenu"> 
 
     <a href="#" tabindex="-1">foo</a> 
 
     <ul class="dropdown-menu"> 
 
     <li> 
 
      <a href="">bar</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

出典

2017-03-21 09:41:49 Ionut

あなたの回答は問題を解決するのに役立ちました。それは私の問題が2倍になったことが判明しました。あなたはそれらのうちの1つを修正し、もう1つは回避できるwebsharper.ui.nextテンプレートのバグでした。私が説明した問題に直面している誰かがあなたが記述したとおりに修正できるはずだから、スニペット –

を発見した例に基づいており、あなたはCSSスタイルもコピーを試してみてください

の最後の項目「バー」を明らかにする：

.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
}

あなたが追加した場合それが動作するはずですそれら。あなたがそれを動作させることができたら、私たちに知らせてください！ ;）

出典

2017-03-21 09:41:43 SrAxi

これはそれが

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu .dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -1px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    
 
<div class="container">          
 
    <div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Y 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">Foo <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="#">Bar</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 

 
<script> 
 
$(document).ready(function(){ 
 
    $('.dropdown-submenu a.test').on("click", function(e){ 
 
    $(this).next('ul').toggle(); 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-03-21 09:52:10 DragonBorn

マルチレベルのブートストラップメニューは、最初のレベルのみ

答えて

関連する問題