我想要这个菜单:Horizontal drop down menu push o 把内容往下移,可以吗?因为当我在“子菜单”中将位置更改为相对(它插入)时,标签 a 不会继续与示例在同一行中。帮助将不胜感激。
最佳答案
您必须对 HTML 结构执行类似这样的操作。
<menu>
<ul>
<!-- main menu -->
</ul>
</menu>
<nav>
<!-- sub navigation -->
</nav>
<main>
<!-- your content -->
</main>
菜单中的每个元素都需要对应于子导航中的一个元素。您可以使用 ID 和数据属性执行此操作。
//in main menu
<li data-menu="downloads"></li>
//in sub navigation
<div id="downloads"></div>
然后 javascript 会监听主菜单中的点击事件,然后显示正确的子导航。如果您单击主菜单项两次,它应该关闭子导航面板。这是 jQuery 以使其易于阅读:
$('menu').on('click', 'li', function(){
//get the id of the li
var id = $(this).attr('data-menu');
//select the correct element and check it's current visibility
var navigation = $('#' + id);
var isHidden = navigation.is(':hidden'); //returns true or false
//close all navigation items
$('nav').children('div').hide();
//if the navigation item was hidden, show it
if(isHidden){navigation.show()};
});
顺便说一句,jQuery 3.0 .show()
和 .hide()
做的事情与仅仅切换 display:none;
不同
关于javascript - 如何在水平菜单中以绝对位置下推内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33710690/