带有单独 div 部分的菜单

Posted 2023-05-07

【中文标题】带有单独 div 部分的菜单

【英文标题】：menu with separate div sections

【发布时间】：2015-11-24 02:57:20

【问题描述】：

几个月来，我一直试图找到连接我的菜单的方法，但令人沮丧的是我没有运气。我不知道我还能尝试什么，所以我想问你们是否可以提供帮助。我在Stack上搜索了一个想法，这以某种方式描述了我想要的功能，但我想使用数据属性方式而不是href，我想使用点击功能而不是悬停，因为它是为了台式机和移动设备。我也想用桌面版本的菜单关闭子菜单，切换是一个选项吗？ 链接：jquery dropdown with separate container

html

<div class="menu">
    <ul>
        <li><a href="javascript:void(0);" data-section="one">item1</a></li>
        <li><a href="javascript:void(0);" data-section="two">item2</a></li>
        <li><a href="javascript:void(0);" data-section="three">item3</a></li>
    </ul>
</div>
<div class="submenu">
    <ul>
        <li class="one">content1</li>
        <li class="two">content2</li>
        <li class="three">content3</li>
    </ul>
</div>

子菜单 ul li 的内容设置为 height:0，我想在触发时将其设置为自动，或者向子菜单 ul li 添加一个类：

.submenu ul li
    display:block;
    overflow:hidden;
    height:0;
.submenu ul li.active
    height:auto;

JS Fiddle

【问题讨论】：

您希望在有人单击主菜单中的父项时打开子菜单？

您想隐藏子菜单不显示，还是要为结束事件设置动画？您的问题使用了几个不同的术语：关闭、切换，我不完全确定您所寻求的行为是什么。

如果您将子菜单项嵌套在菜单标题中，这不是更容易吗？这样看起来也更有语义。

您好，是的，我希望子菜单 ul li 在单击 .menu > a 时打开（高度：auto）。我所说的切换是我想使用 .menu > a 来关闭菜单，如果用户想要关闭菜单回到它的原始状态（高度：0）

【参考方案1】：

我不确定这是否是您想要的，但请尝试替换

$(this).attr('data-section').slice(1)

有了这个

$(this).attr('data-section')

jsfiddle（基于你的）

【讨论】：

哈哈，这确实有效，不是吗。杰出的。现在我所要做的就是使用相同的 .menu li a 来再次关闭菜单，如果用户想要这样做的话。有什么想法@MuZk？

你可以询问你的 li 目标是否已经有这个类。如果是这样，那么只需删除该类。检查这个：jsfiddle.net/78mpwLq4/5

非常感谢您在这方面的帮助。谢谢。

【参考方案2】：

只需删除 .slice(1)。我不知道你为什么添加这个。

当您单击菜单链接时，jquery 将从列表中删除活动类，并将按数据部分添加到与菜单链接相关的新链接。