展开菜单，显示子菜单 [英] Expand menu, show submenu

问题描述

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

I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...

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

This is my code so far...

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

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

So when I click on galleries the options Add and Delete should appear. Any suggestions?

推荐答案

我会像这样嵌套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：

The I would use this jquery:

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

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

You would need to set the sub menu CSS to display none.

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

Something along these lines should do the trick.

这篇关于展开菜单，显示子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！