Bootstrap 3中的嵌套式手風琴列表在選擇父母時沒有取消選擇

我遇到了Bootstrap 3的問題，我正在使用手風琴嵌套導航列表菜單。但是，這並不像我所希望的那樣。有兩種情況，我似乎無法弄清楚：Bootstrap 3中的嵌套式手風琴列表在選擇父母時沒有取消選擇

我選擇主1，然後打開主2，選擇子1（MAIN1應被取消）
我點擊子1，然後選擇主1（1分應取消及主要二要崩潰）

一切似乎是爲了工作，但我不知道我是否操作引導3的功能外，還是隻是做是錯誤的。

失敗的，也許有一個Bootstrap JS的調整我可以執行以獲得預期的功能？

這是我到目前爲止有：

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"/> 
<style> 
/* sidenav deselected */ 
.bs-sidebar .nav > li > a { 
    color: #000000; 
    padding: 10px; 
    margin: 5px 0px 5px 0px; 
} 
/* sidenav selected */ 
.bs-sidebar .nav > .active > a, 
.bs-sidebar .nav > .active:hover > a, 
.bs-sidebar .nav > .active:focus > a, 
.bs-sidebar .nav > li > a:hover, 
.bs-sidebar .nav > li > a:focus { 
    color: #ffffff; 
    background-color: #205f9f; 
    text-decoration: underline; 
    border-radius: 4px; 
    padding: 10px; 
    margin: 5px 0px 5px 0px; 
} 
/* sidenav 2nd layer overwrites */ 
.bs-sidebar .nav .nav > li > a, 
.bs-sidebar .nav .nav > li > a:hover { 
    font-size: 90%; 
    padding: 5px 0px 5px 30px; 
    margin: 5px 5px 5px 5px; 
} 
</style> 

</head> 
<body> 

    <div class="panel-body"> 
     <div class="bs-sidebar"> 
      <ul class="nav bs-sidenav"> 
       <li><a href="#Main1" data-toggle="tab">Main 1</a></li> 
       <li><a href="#Main2" data-toggle="collapse">Main 2 <b class="caret"></b></a> 
        <ul class="subnav nav panel-collapse collapse" id="Main2"> 
         <li><a href="#sub1" data-toggle="tab">Sub 1</a></li> 
         <li><a href="#sub2" data-toggle="tab">Sub 2</a></li> 
         <li><a href="#sub3" data-toggle="tab">Sub 3</a></li> 
        </ul> 
       </li> 
       <li><a href="#Main3" data-toggle="tab">Main 3</a></li> 
      </ul> 
     </div> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

你的幫助非常感謝。

來源

2014-01-23 Aaron

了那裏到底，似乎有些額外的JavaScript是需要得到它的工作：

<script type='text/javascript'> 
     $(window).load(function(){ 
      // when nav list is clicked 
      $('.bs-sidebar .nav > li > ul > li > a').on('click',function(){ 
       // remove child selection 
       $(this).closest('.bs-sidenav').find('.active').removeClass('active'); 
      }); 
      // when parents are clicked 
      $('.nav.bs-sidenav > li > a').on('click',function(){ 
       // if this selection is a nav item 
       if ($(this).attr('data-toggle') == "tab"){ 
        // deactivate the old sub item 
        $(this).closest('.nav.bs-sidenav').find('.active').removeClass('active'); 
       } 
       // collapse subnav 
       $('.subnav.in').collapse('hide'); 
      }); 
     }); 
</script>

有可能是一個更好的方法，但通過把一些額外的點擊條件下，這涵蓋了兩種情形以上。現在，它在導航到另一個菜單/子菜單項時正確摺疊，並且僅當導航項被點擊時才取消選擇（而不是當我通過摺疊菜單「瀏覽」時）

來源

2014-01-24 11:50:59 Aaron

Bootstrap 3中的嵌套式手風琴列表在選擇父母時沒有取消選擇

回答

相關問題