2

I'm using jQuery slideToggle function and the media queries.

The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.

If I do not click on the toggle link, and resize the window back to large size, it works fine.

Demo to see the problem:

Please check the demo here, where you can see the problem: http://jsfiddle.net/3Jj7J/

Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.

Here's my code:

HTML:

<div class="bar">
    <a class="toggle" href="#">MAIN MENU</a>
</div>

<div class="nav">
    <div class="wrap">
        <ul>
            <li>Link 1</li>
             <li>Link 2</li>
        </ul>
    </div>
</div>

CSS:

.bar{
    display: none;
    border: 1px solid red;
}

@media screen and (max-width: 500px) {
     .nav ul { 
        display: none;
    }

    .bar{
        display: block;        
    }
}

jQuery:

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});
4

2 に答える 2

5

ウィンドウのサイズ変更イベント ハンドラを追加します。 

var menu = jQuery('.nav .wrap > ul');       
jQuery(".toggle").click(function() {
    menu.slideToggle(500);
});  

jQuery(window).on('resize', function(){   
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
         menu.show();   
    }
});

jsFiddle : http://jsfiddle.net/3Jj7J/1/

更新: これは代替ソリューションです (インラインdisplayプロパティを削除するだけなので、css ルールが使用されます)。

jQuery(window).on('resize', function(){     
    if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
    {
        menu.css({'display':''});   
    }
});

デモ

于 2013-09-24T09:10:07.910 に答える
1

私はあなたの問題を読み、自分でテストしました。さて、次のようにしてリンクを表示させました。

CSS:

        #bar {
        display: none;
        color: #000000;
        border: 1px solid red;
    }

    @media screen and (max-width: 500px) {
         #nav ul { 
            display: none;
        }

        .bar{
            display: block;        


   }
}

自分で確認してください ( http://jsfiddle.net/hSZ7t/ ) 私が行ったことは、CSS を変更したことです。あなたの代わりに：

.bar {

雪が降る：

#bar {

于 2013-09-24T08:56:25.747 に答える