javascript - 如何在水平菜单中以绝对位置下推内容？

Question

我想要这个菜单:Horizontal drop down menu push o 把内容往下移，可以吗？因为当我在“子菜单”中将位置更改为相对(它插入)时，标签 a 不会继续与示例在同一行中。帮助将不胜感激。

Answer 1

您必须对 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; 不同