下拉菜单在...下拉菜单与引导

我需要把下拉菜单...在下拉菜单在引导3.这是我试过的：Demo。下拉菜单在...下拉菜单与引导

enter image description here

不幸的是，当我点击第二个下拉，它不会显示。

如何在点击它时显示第二个下拉菜单？那么如何（用JS或jQuery）能够处理第二个下拉列表的状态变化？

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a> 

        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Edit</a> 
         </li> 
         <li><a href="#">Delete</a> 
         </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Visible by friends<span class="caret"></span></a> 

          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Visible by friends</a> 
           </li> 
           <li><a href="#">Visible by me only</a> 
           </li> 
           <li><a href="#">Visible by anyone</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

来源

2014-10-10 Basj

*（我知道答案可能是：在下拉列表下拉urrr，不这样做？但在这里我想研究如何做到这一点）* – Basj 2014-10-10 21:52:34

这可能会帮助你：http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing – xaisoft 2014-10-10 21:56:34

谢谢@xaisoft，它是离我的问题不远，但它有点不同。这里是一个子菜单：http：//www.bootply.com/86684，当悬停2 /在右侧时，会自动显示1/... ...而不是我想要的：子菜单仅在点击时显示子菜单显示在下面，就像下拉菜单一样。 – Basj 2014-10-10 22:01:13

也许复制你可以尝试手动触发内部模式的下拉。见fiddle

JS：

$('.dropdown li').click(function (e) { 
e.stopPropagation(); 
}); 
$('.dropdown-inner').click(function (e) { 
    e.stopPropagation(); 
    $(this).toggleClass('open').trigger('shown.bs.dropdown'); 
});

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a> 

       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Edit</a> 
        </li> 
        <li><a href="#">Delete</a> 
        </li> 
        <li class="dropdown-inner"> <a href="#" class="dropdown-toggle-inner">Visible by friends<span class="caret"></span></a> 

         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Visible by friends</a> 
          </li> 
          <li><a href="#">Visible by me only</a> 
          </li> 
          <li><a href="#">Visible by anyone</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

来源

2014-10-10 22:12:47 mark

结果将会像“一个大菜单“：http://imgur.com/nRJqzJX：我们无法区分菜单和子菜单。任何想法解决这个问题？（请参阅其他答案的评论） – Basj 2014-10-10 22:19:04

这可以使用css来解决，并根据您的特定目的进行定制。看到这个[小提琴]（http://jsfiddle.net/mmtx0zph/4/）为一个一般的例子。 – mark 2014-10-11 00:29:14

谢谢@mark！这里是我想要做的（我在内部下拉菜单中使用“按钮”）：http://jsfiddle.net/mmtx0zph/6/ 我应该添加哪些JS，以便可以打开内部按钮？ – Basj 2014-10-11 13:02:04

添加以下JavaScript：

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
    // Avoid following the href location when clicking 
    event.preventDefault(); 
    // Avoid having the menu to close when clicking 
    event.stopPropagation(); 
    // If a menu is already open we close it 
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open'); 
    // opening the one you clicked on 
    $(this).parent().addClass('open'); 
});

演示可以看到here。

来源

2014-10-10 22:08:08 xaisoft

谢谢！它可以工作，但结果会像“一个大菜单”一样：http：//imgur.com/nRJqzJX ......：我们无法区分菜单和子菜单。我想区分菜单和子菜单，我不明白怎么做...我想要这样的子菜单：http://imgur.com/7p0h2OM – Basj 2014-10-10 22:17:54

结账http://www.bootply.com/71520与Bootstrap 3 dropdown sub menu missing

来源

2014-10-10 22:11:32 Peng

下拉菜单在...下拉菜单与引导

回答

相关问题