0

我想要做的本质上是一个显示和隐藏，但仅当屏幕尺寸为 480 像素或更小时。

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

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

Home
Email
... More

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

People
Explore
... More

所以我的问题是：我如何用第二个 div 替换第一个 div 并让它变成togle？

我的代码：

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

这是一个小提琴来展示我正在使用的东西。提前谢谢你的帮助。

4

3 回答 3

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

});
于 2013-09-06T19:06:31.453 回答
1

我认为您的列表未正确声明，因为您使用了一些 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();   
    });
于 2013-09-06T19:12:10.383 回答
0

您的代码中有很多问题：

1) 所有<ul>标签都应该只有<li>标签作为它们的直接子代。你不应该把<div>标签放在那里。您可以在<li>.

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

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

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

于 2013-09-06T19:10:57.520 回答