显示'more'窗口大小为 480 像素后显示的选项

Question

我想做的本质上是显示和隐藏，但只有当屏幕尺寸为 480px 或更小时。

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

示例：（窗口大小 480 像素）：

Home
Email
... More
<!---- 'MORE' CLICKED ----!>
People
Explore
... More

所以我的问题是：我如何用第二个div 替换第一个div 并使其嘟嘟？

我的代码：

$('a.show-more').click(function(){
    $('.mobile-1').hide();
    $('.mobile-2').show();
},function(){
    $('.mobile-1').show();
    $('.mobile-2').hide();
});

这是一个小提琴来展示我正在使用的内容。提前感谢您的帮助。

Answer 1

使用 .is(':visible') 决定隐藏/显示的内容，然后将...more附加到显示元素的末尾。

查看演示

$(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
});

Answer 2

我认为您的列表没有正确声明，因为您使用了一些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>

这只使用没有 DIV 标签的 LI，所以我在将要切换的项目中添加一个类。

然后，您可以使用以下代码控制可见性：

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

Answer 3

你的代码中有一堆问题：

1） 所有<ul>标签应仅将<li>标签作为其直接子项。 你不应该把<div>标签放在那里。 您可以在<li>上添加类。

2） 您的点击处理程序结构不正确。 它应该只采用一个函数，而不是两个。

3）导航中的<a>标签应设置为display:block，以便您可以单击背景颜色上的任意位置，而不仅仅是单词。

这里有一个小提琴：http://jsfiddle.net/W3Sav/12/