0

What I'm trying to do is essentially a show and hide but only when the screen size is 480px or smaller.

Its a simple menu. Show all items if the window size is not a max-size of 480px. When the window size is smaller or equal to 480px, give the option to show more of the menu. But if the user clicks the 'More' option, hide the first 2 items and replace with the hidden options. And in vice versa.

Example: (Window size 480px):

Home
Email
... More

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

People
Explore
... More

So my question is this: how do I replace the first div with the second and make it toogle?

My code: 

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

Here is a fiddle to show what I'm working with. Thank you for your help in advance.

4

3 に答える 3

1

LIアイテムだけでなくいくつかのdivを使用しているため、リストが適切に宣言されていないと思うので、この構造を試すことができます:

<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 に答える
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 に答える
0

あなたのコードにはたくさんの問題があります:

1) すべてのタグは、直接の子としてタグ<ul>のみを持つ必要があります。そこにタグを<li>入れてはいけません。<div>にクラスを追加できます<li>。

2) クリック ハンドラーが正しく構造化されていません。2 つではなく、1 つの関数のみを使用する必要があります。

3)<a>ナビゲーションのタグはdisplay:block、単語だけでなく、背景色のどこでもクリックできるように設定する必要があります。

ここにフィドルがあります：http://jsfiddle.net/W3Sav/12/

于 2013-09-06T19:10:57.520 に答える