Jquery 显示'；更多'；窗口大小为480px后显示的选项

我试图做的基本上是一个显示和隐藏，但只有当屏幕大小是480px或更小

这是一份简单的菜单。如果窗口大小不是最大480px，则显示所有项目。当窗口大小小于或等于480px时，提供显示更多菜单的选项。但如果用户单击“更多”选项，则隐藏前两项并替换为隐藏选项。反之亦然

示例：（窗口大小为480px）：

这里有一个例子来说明我的工作。提前谢谢你的帮助

使用

.is（':visible'）

决定要隐藏/显示的内容，然后只需将

…more

附加到显示元素的末尾即可

看

---

您的代码中存在一系列问题：

1） 所有

标记都应该只有

标记作为其直接子项。你不应该把

标签放在那里。您可以在

上添加类

2） 您的单击处理程序结构不正确。它应该只有一个功能，而不是两个

---

3）

我认为您的列表没有正确声明，因为您使用了一些div而不是LI项，所以您可以尝试以下结构：

<ul class="nav">
    <li class="item">
        <a href="/home/">Home</a>
    </li>
    <li class="item">
        <a href="/home/">Email</a>
    </li>
    <li class="item mobile-2">
        <a href="/home/">People</a>
    </li>
    <li class="item mobile-2">
        <a href="/home/">Explore</a>
    </li>
    <li class="more">
        <a class="show-more">... More</a>
    </li>
</ul>

但是，当重新调整到更大的分辨率时，这是可行的；它不会显示所有项目。有什么解决办法吗？你可以不用花哨的css高度检查，只需添加
$（window.resize（）作为代码的最后一行。这太棒了。非常感谢你！
$('a.show-more').click(function(){
    $('.mobile-1').hide();
    $('.mobile-2').show();
},function(){
    $('.mobile-1').show();
    $('.mobile-2').hide();
});

$(function () {
    $('.more').click(function () {
        if ($('.mobile-1').is(":visible")) {
            $('.mobile-1').hide();
            $('.mobile-2').show();
            $(this).appendTo($('.mobile-2'));
        } else {
            $('.mobile-1').show();
            $('.mobile-2').hide();
            $(this).appendTo($('.mobile-1'));
        }
    });


    $(window).resize(function () {
        if ($(window).height() > 480) {
            $('.mobile-1').show();
            $('.mobile-2').show();
            $('.more').hide();
        } else {
            $('.mobile-1').show();
            $('.mobile-2').hide();
            $('.more').show().appendTo($('.mobile-1'));
        }
    });

    // $(window).resize(); // if you do away with your css height check

});

<ul class="nav">
    <li class="item">
        <a href="/home/">Home</a>
    </li>
    <li class="item">
        <a href="/home/">Email</a>
    </li>
    <li class="item mobile-2">
        <a href="/home/">People</a>
    </li>
    <li class="item mobile-2">
        <a href="/home/">Explore</a>
    </li>
    <li class="more">
        <a class="show-more">... More</a>
    </li>
</ul>

    $('a.show-more').click(function(){
      $('.item').toggle();   
    });