如何在水平菜单中以绝对位置向下推送内容

How to push content down with position absolute in an horizontal menu?

本文关键字：位置 下推 水平 菜单      更新时间：2023-09-26

我想要这个菜单：水平下拉菜单来向下推动内容，可以吗？因为当我在"子菜单"中将位置更改为相对（它推动）时，标记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; 不同

相关文章：