2017-07-16 81 views
1

我有一個側欄包含以下代碼,問題是當點擊李,子菜單消失,但我想顯示他們時,點擊一個並且保持李的開放。點擊李保持開放ul與類摺疊導航導航藥丸nav-stacked

我在互聯網上搜索了很多,看到了很多例子,乍一看似乎他們沒有問題,我指出了它,但當我給它的href添加一個地址時,它們也不會保持打開狀態。

 <ul class="nav nav-pills nav-stacked text-center" style="padding- right:2px;" > 

      <li> 
      <a href="#collapse1" id="btn-1" class="text-center" data- toggle="collapse"><span><b>A</b></span> </a> 
       <ul class="nav nav-pills nav-stacked text-center collapse " id="collapse1" role="menu" aria-labelledby="btn-1" aria-expanded="false"> 
          <li ><a href="~/A/A-a">A-a</a></li> 
          <li ><a href="~/A/A-b">A-b</a></li> 
          <li ><a href="~/A/A-c">A-c</a></li> 
         </ul> 
        </li>    


        <li> 
         <a href="#collapse2" class="text-center" data-toggle="collapse"><span><b>B</b></span></a> 
         <ul id="collapse2" class="collapse nav nav-pills nav-stacked text-center collapse" aria-expanded="false"> 
          <li ><a href="~/B/B-a">B-a</a></li> 
          <li ><a href="~/B/B-b">B-b</a></li> 
          </ul> 
        </li>             
       </ul> 

我怎能開放UL使用id = collapse1和collapse2當點擊一個李只是當接近他們,點擊它們的父李

回答

0

我只是修改你的代碼檢查它現在

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <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.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" class="accordion-toggle" href="#collapse1"><b>A</b></a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse1" class="panel-collapse collapse in"> 
 
     <ul class="panel-body nav nav-pills nav-stacked"><li ><a href="~/A/A-a">A-a</a></li> 
 
          <li ><a href="~/A/A-b">A-b</a></li> 
 
          <li ><a href="~/A/A-c">A-c</a></li></ul> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" class="accordion-toggle" href="#collapse2"><span><b>B</b></span></a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse2" class="panel-collapse collapse"> 
 
     <ul class="panel-body nav nav-pills nav-stacked"> <li ><a href="~/B/B-a">B-a</a></li> 
 
          <li ><a href="~/B/B-b">B-b</a></li></ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

+0

謝謝您的回答,但它不保留開放UL,我不想用「崩潰」來顯示所有的子菜單,我只是婉當用戶點擊主菜單時,用戶會看到子菜單,我使用你的代碼並用真實地址修改了href,但是當我點擊子菜單上的一個時,主菜單又關閉了。 –

+0

你想要顯示的子菜單總是 –

+0

不,我不想這樣,我只需要當用戶點擊主菜單子菜單時顯示,另一方面如果用戶點擊一個子菜單它不會隱藏,它顯示直到用戶點擊主菜單以保持關閉子菜單。總之,我需要通過點擊主菜單來顯示和隱藏子菜單 –