本文介绍了展开菜单,显示子菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个可扩展菜单。因此,如果用户点击选项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.
这篇关于展开菜单,显示子菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!