2017-07-16 113 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

不,我不想这样,我只需要当用户点击主菜单子菜单时显示,另一方面如果用户点击一个子菜单它不会隐藏,它显示直到用户点击主菜单以保持关闭子菜单。总之,我需要通过点击主菜单来显示和隐藏子菜单 –