Question

我有一个列表(.mainMenu)，其中包含嵌套列表(.subMenu)，我想在下载时单击下拉列表。基本上我希望嵌套列表滑动切换以在点击时显示它，但我遇到麻烦，因为我需要嵌套列表位于主列表下方。

我想知道在没有将position: absolute;应用于.subMenu的情况下是否实现了此目的。 position:absolute不适合我的原因是我需要在菜单打开/关闭时向上/向下推动.mainMenu以下的所有内容。

继承了迄今为止我所拥有的Demo。下面是website我想要实现的目标（点击主菜单中的Men查看功能）。

HTML

<ul class="mainMenu">
  <li>Link</li>
  <li>Main +
    <ul class="subMenu">
        <li>Sub</li>
        <li>Sub</li>
        <li>Sub</li>
        <li>Sub</li>
    </ul>
  </li>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>

<div class-"main-content">
    All content below the menu that needs to move up down as and when subMenu is opened/closed.
</div>

JS：

$('.mainMenu').children('li').on('click', function() {
   $(this).children('ul').slideToggle('slow'); 
});

希望我很清楚，如果有人知道任何教程，或者能指出我正确的方向，我会非常感激，我发现很难在网上找到任何帮助。

Answer 1

考虑到你的CSS水平和评论上的消息，你可以更容易地使用任何你需要的小部件库，如jQueryUI或者Bootstrap。

无论如何，如果你想跟随你在这里所做的那样，你有一个更新的提琴手来实现你想要的：

http://jsfiddle.net/2ezsP/130/

这是代码：

<ul class="mainMenu">
   <li>Link</li>
   <li id="option1">Main +</li>
   <li>Link</li>
   <li>Link</li>
   <li>Link</li>
   <li>Link</li>
</ul>
<ul id="subMenu1">
   <li>Sub</li>
   <li>Sub</li>
   <li>Sub</li>
   <li>Sub</li>
</ul>

<div class-"main-content">
   All content below the menu that needs to move up down as and when subMenu is opened/closed.
</div>



ul.mainMenu {
    list-style: none;
    width: 100%;
    background-color: grey;
}

li {
    display:inline-block;
    cursor:pointer;
}

#subMenu1 {
    display: none;
}



$('#option1').on('click', function() {
       $('#subMenu1').slideToggle('slow'); 
});

Answer 2

为什么不像你展示的示例页面那样解决它？而不是将子菜单放在主菜单中，只需将子菜单放在主菜单下面作为隔离元素。

您可以看到here我是如何尝试解决此问题的。

<强> HTML

<ul class="mainMenu">
    <li>Link</li>
    <li><a href="#" class="subLink">Main +</a></li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
</ul>

<ul class="subMenu">
    <li>Sub</li>
    <li>Sub</li>
    <li>Sub</li>
    <li>Sub</li>
</ul>

<div class-"main-content">All content below the menu that needs to move up down as and when subMenu is opened/closed.</div>

<强> JS

$(".subLink").click(function(){
    $(this).text() === "Main +" ? $(this).text("Main -") : $(this).text("Main +");
    $(".subMenu").slideToggle("slow");
});

使用jQuery slideToggle在主列表下扩展水平嵌套列表？

2 个答案: