Question

我想要做的事情本质上是一个节目和隐藏，但只有当屏幕尺寸为480px或更小时。

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

示例:(窗口大小为480像素）：

Home
Email
... More

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

People
Explore
... More

所以我的问题是：如何用第二个替换第二个div并将其设为toogle？

我的代码：

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

这是一个显示我正在使用的fiddle。提前谢谢你的帮助。

Answer 1

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

请参阅demo

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

在窗口大小为480px后显示“更多”选项

3 个答案: