切换后菜单消失

Question

当 window 宽度为 720 像素或更小时，我有一个下拉列表菜单。当分辨率超过该分辨率时，li 元素将显示为 table 单元格。下拉菜单本身工作正常，但是当我关闭菜单并将分辨率扩展到 720px 以上时，整个列表都消失了。我该如何解决这个问题，以便列表在 720 像素之后始终可见？

这是我的问题的图片，以防我没有解释得太清楚：

HTML

<div class='menu'>
    <button type='button' class='showList'>Menu</button>
    <div class='full_list'>
        <ul>
           <li></li>
           <li></li>
           <li></li>
        </ul>
     </div>
</div>

CSS

.full_list {
    display: none;
}

@media (min-width: 720px) {
    .full_list {
        display: block;
    }

    .menu button {
        display: none;
    }

    .menu {
        display: table;
        background: #fff;
        margin: 0 auto;
    }

    li {
        display: table-cell;
        vertical-align: middle;
    }

    ul {
        white-space: nowrap;
    }
}

Javascript

$(document).ready(function() {
    $('.showList').click(function() {
        $('.full_list').slideToggle("fast");
    });
});

Click here for the fiddle 请务必在单击菜单按钮前后调整大小。

感谢您的帮助！

Answer 1

因为您希望 .full_list 保持其 diplay:block 不受 .slideToggle() 的影响，请将 !important 添加到

.full_list {
        display: block;
    }

所以变成了

.full_list {
    display: none;
}

@media (min-width: 720px) {
    .full_list {
        display: block !important; 
    }

    .menu button {
        display: none;
    }

    .menu {
        display: table;
        background: #fff;
        margin: 0 auto;
    }

    li {
        display: table-cell;
        vertical-align: middle;
    }

    ul {
        white-space: nowrap;
    }
}

见jsfiddle, or altered version of your jsfiddle

Answer 2

<style>
    .full_list {
        display: none;
    }
    .showList{
        border: none;
        width: 100%;
        padding: 5px 0px; 
        text-align: center;
        background: #CCC;
        cursor: pointer;
    }
    .full_list{
        width: 100%;
        float: left;
    }
    .full_list > ul{
        float: left;
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
    }
    .full_list > ul > li{
        list-style: none;
        text-align: center;
        padding: 5px 0px;
        border-left: 1px solid #CCC;
        border-right: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
        width: 99%;
        float: left;
    }

    @media (min-width: 720px) {
        .full_list {
            display: block;
        }

        .menu button {
            display: none;
        }

        .menu {
            display: table;
            background: #fff;
            margin: 0 auto;
        }

        li {
            display: table-cell;
            vertical-align: middle;
        }

        ul {
            white-space: nowrap;
        }

    }
</style>
<div class='menu'>
    <button type='button' class='showList'>Menu</button>
    <div class='full_list'>
        <ul>
            <li>dsdsadsa</li>
            <li>sadsadsadsad</li>
            <li>fdsfds</li>
        </ul>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.showList').click(function () {
            $('.full_list').slideToggle("fast");
        });
    });
</script>

Answer 3

尽管 fuyushimoya 的解决方案是有效的，但必须尽可能避免使用 !important。它应该被视为最后的手段。

尝试像这样修改 jQuery -

$(document).ready(function() {
    $('.showList').click(function() {
        $('.full_list').slideToggle("fast");
    });
  $(window).resize(function(){
    if($(window).width()>=720)
      $('.full_list').css('display','block');
    else
      $('.full_list').css('display','none');
  });
});

这是fiddle

Answer 4

更好的方法是 toggle class.

创建一个 class 作为 -

.full_list-expanded {
        display: block;
}

并将jQuery修改为-

$(document).ready(function() {      
    $(".showList").click(function() {       
        $(".full_list").slideToggle(400, function() {
            $(this).toggleClass("full_list-expanded").css('display', '');
        });     
    }); 
});

这里是 fiddle.

切换后菜单消失

Menu disappears after toggle

html

javascript

css

jquery

toggle