Question

我正在尝试创建一个“可扩展”菜单。因此，如果用户点击选项A，则应显示两个子选项。我正在尝试做this之类的事情，但是在菜单中......

到目前为止，这是我的代码......

<li>
 <a href="?op=1" data-toggle="collapse" data-target=".nav-collapse88"><i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>

因此，当我点击图库时，应显示“添加”和“删除”选项。有什么建议吗？

Answer 1

我会像这样嵌套ul：

<ul>
   <li>
      <a class="expand">Link used to expand</a>
      <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
      </ul>
  </li>
</ul>

我会使用这个jquery：

$(document).on('click', 'a.expand', function(e) {
  e.preventDefault();
  $(this).siblings('ul').slideToggle();
});

您需要将子菜单CSS设置为不显示。

沿着这些方向做的事情应该可以解决问题。

Answer 2

这有效：

<ul>
  <li class="dropdown">
    <a href="?op=1">Support</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href=""><i class="icon-play"></i> Add</a></li>
      <li><a href=""><i class="icon-play"></i> Delete</a></li>
    </ul>
  </li>
</ul>

Answer 3

我相信你希望课程下拉而不是崩溃。这就是bootstrap文档为菜单推荐的方式。

将类更改为dropdown，删除内部div，并将类dropdown-menu添加到内部ul。

<li class="dropdown">
<a href="?op=1" data-toggle="dropdown"><i class="icon-picture icon-white"></i>>Galleries</a>
                        <ul class="dropdown-menu">
                              <li>
                                <a href=""><i class="icon-play"></i> Add</a>
                              </li>
                              <li>
                                <a href=""><i class="icon-play"></i> Delete</a>
                              </li>
                         </ul>
                  </li>

Answer 4

这是http://jsfiddle.net/68RXP/213/

$(function(){
        $(".nav-collapse88").hide();
        $("a").click(function(e){
            e.preventDefault();
            $(".nav-collapse88", $(this).parent()).slideToggle();        
        });
    })
<li>
 <a href="?op=1">
     <i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>

展开菜单，显示子菜单

4 个答案: