显示窗口后显示的“更多”选项为480 is

Question

我试图做的基本上是一个节目和隐藏，但只有当屏幕大小为480‘m或更小。

菜单很简单。如果窗口大小不是480 max的最大大小，则显示所有项目。当窗口大小较小或等于480 to时，请提供选项以显示菜单的更多内容。但是，如果用户单击“More”选项，则隐藏前2项并替换为隐藏选项。反之亦然。

示例：(窗口大小480)：

Home
Email
... More

<!---- 'MORE' CLICKED ----!>

People
Explore
... More

因此，我的问题是:如何用第二个div替换第一个div，并使它变成toogle？

我的代码：

$('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/