1

単純なドロップダウン アコーディオン ボタンに反応して変換するサイドバー リストがあります。問題は、ウィンドウのサイズを小さく変更すると、リストを開いてから閉じてから、ウィンドウのサイズを大きく変更することです。リストは「デスクトップ」形式で再表示されません。

デモ: http://iamalecschmidt.com/newblog/

簡単な Javascript を使用してメニューを切り替え、サイドバーをメニューに切り替えています。

HTML:

<aside class="left-sidebar">

    <p class="intro">Hey! I’m Alec.</p>
    <p class="bio">
        I <a href="#">design</a> interfaces for websites & apps, I also 
        <a href="#">cook</a> and I am an aspiring front-end 
        <a href="#">developer</a>.
    </p>

    <div class="leftNavWrap">

        <ul class="leftNav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <a class="topicsButton" href="#">Topics &nbsp;<span>&#9660;</span></a>
        <a class="dribbbleIcon" href="#">Dribbble</a> 
        <a class="twitterIcon" href="#">Twitter</a>
    </div>
</aside>

ジャバスクリプト:

<script type="text/javascript"> // responsive menu
jQuery(document).ready(function($){

    /* prepend menu icon */
    $('p.bio').append('<div id="menu-button"><p>Menu</p></div>');

    /* toggle nav */
    $("#menu-button").on("click", function(){
        $('div.leftNavWrap').slideToggle();
        $(this).toggleClass("active");
    });

});
</script>
4

2 に答える 2

2

slideToggleトグルされた要素のスタイルをdisplay:none閉じたとき ( http://api.jquery.com/slideToggle/ ) に設定するため、サイズを変更して「デスクトップ」に戻すと、要素は非表示のままになります。

幅が「デスクトップ」ブレークポイントを超えて拡大するタイミングを確認し、それが表示されるようにするか、クラスを切り替えたり、css トランジションでアニメーションを適用するなど、表示/非表示の別の方法を使用する必要があります。

于 2012-12-07T04:09:13.263 に答える
0

問題が見つかりました..

上部のメニューを開いて最大化すると、機能します。メニューを閉じてウィンドウを最大化すると、問題が発生します。

まだ残っているNavWrapの表示はなし。

さらにヘルプが必要な場合は、トップメニューとサイドバーを表示および非表示にするコードを表示してください...

于 2012-12-07T04:06:27.793 に答える