Question

我一直在尝试将响应式手风琴风格的多级菜单与各种教程中的部分组合在一起。我遇到的问题是在响应式视图中使用辅助列表上的slideToggle，似乎没有发生任何事情，我也没有看到任何控制台错误。

我已经设置了一个JS小提琴，所以你可以在这里轻松查看：JS Fiddle

非常感谢您对此的任何帮助。

HTML

<nav class="clearfix">
    <a href="#" id="pull">Menu</a>
    <ul class="clearfix" id="TopLevel-List">
        <li><a href="#" id="trigger_Nested-0">Nav 1</a>
            <ul class="clearfix" id="Nested-0">
                <li><a href="#">Ad Hoc</a></li>
                <li><a href="#">Drill Down</a></li>
                <li><a href="#">Ranking Report</a></li>
            </ul>     
        </li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a>
            <ul>
                <li><a href="#" >Ad Hoc</a></li>
                <li><a href="#">Drill Down</a></li>
                <li><a href="#">Ranking Report</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 4</a>
            <ul>
                <li><a href="#" >Ad Hoc</a></li>
                <li><a href="#">Drill Down</a></li>
                <li><a href="#">Ranking Report</a></li>
            </ul>
        </li>
        <li><a href="#">Nav 5</a></li>
        <li><a href="#">Nav 6</a></li>  
    </ul>
</nav>

的jQuery

$(function() {
    var pull    = $('#pull');
    menu        = $('nav ul');
    menuHeight  = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

$(function(){
    $("ul[id|=Nested]").hide();

    $("a[id|=trigger_Nested]").click(function() {
        $(this).siblings("ul").slideToggle("fast");
        return false;
    });
});

Answer 1

似乎只有Nav 1应该有滑动行为所以我专注于那个。

由于li设置为display:none，因此似乎无法执行任何操作。 ul本身的高度为零，当你切换幻灯片时，它会滑动到零高度并且从零开始无效。

http://jsfiddle.net/X88vM/2/

我添加了一行代码，以便在li展开时显示ul。

          $("a[id|=trigger_Nested]").click(function() {
            $(this).siblings ('ul').find ('li').show (); //this line i added
            $(this).siblings("ul").slideToggle("fast");

            return false;
          });

修改

以上只是为了向您展示幻灯片切换无法正常工作的原因。如果您希望解决方案更加通用/更好，则应该执行此操作http://jsfiddle.net/X88vM/4/：

nav li ul li { /*display: none;*/ //comment out this line height: auto; margin: 0; padding: 0; width:100px; } #Nested-0 { //add this new rule display:none; }

并在您的代码中

menu = $('#TopLevel-List'); //change to this selector instead

我觉得在同一个菜单中混合下拉菜单和手风琴很奇怪。

Answer 2

小提琴：http://jsfiddle.net/X88vM/3/

没有任何反应的原因是您在css中将li显示设置为none。

在@media screen and (max-width: 600px)下，将显示更改为阻止：

nav li ul li    {
          display: block;
          height: auto;                                 
          margin: 0;
          padding: 0;
          width:100px;                      
     }

响应式多级菜单

2 个答案: