切换

Question

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

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

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 to

.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或jsfiddle

的更改版本

Answer 2

虽然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 3

更好的方法是toggle类。

创建一个类 -

.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。

Answer 4

<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>