1

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

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

<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>

因此，当我单击画廊时，应该会出现“添加”和“删除”选项。有什么建议么？

4

4 回答 4

4

我会像这样嵌套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 设置为不显示。

这些方面的东西应该可以解决问题。

于 2012-12-14T14:33:00.753 回答
1

这有效：

<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>
于 2012-12-14T14:52:56.173 回答
0

我相信您希望班级下拉而不是崩溃。这就是引导文档为菜单推荐它的方式。

把classdropdown改成 ，去掉里面的div，把classdropdown-menu加上inner 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>
于 2012-12-14T14:31:41.833 回答
0

tyy 这个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>​
于 2012-12-14T14:33:32.337 回答