0

レスポンシブ サイトの「小さい」またはモバイル サイズのバージョンに JavaScript トグル効果を実装しようとしています。独自のカスタム WordPress テーマを使用しています。

この記事のスクリプトを使用しようとしています: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1

トリッキーな部分は、単一のナビゲーションだけでなく、複数の div を含めようとしていることです。現在（まだ建設中の）サイトを見ると、次の場所にあります。

http://66.147.244.81/~assureva/

ブラウザ ウィンドウを 540px より狭くすると、上部のナビゲーション バー (smallnav)、2 つの「ログイン」リンク、および facebook と LinkedIn のアイコンが表示されなくなり、押すと再表示されることがわかります。上部のロゴの右側に表示される「メインメニュー」ボタン。しかし、メインの「ナビゲーション」を構成する 4 つのリンクである最後の部分を追加できないようです。領域全体を div (mobimenubg) でラップしましたが、メインのナビゲーション バーはその div に含まれていないように動作しますが、「smallnav」、「logins」、および「socialcons」の div はすべて「mobimenubg」で必要に応じて結合されます。 " div.

「navbar」div を「display:none」に設定すると消えますが、「メイン メニュー」ボタンをクリックしても再表示されません。

したがって、「mobimenubg」divと「navbar」div（「navbar div」は実際の「nav」を含むコンテナーです）を含めるようにjavascriptに依頼する答えだと思いますが、適切に記述する方法がわかりません。

これがJavaScriptです：

<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
    $("#mobimenubg").slideToggle();
    $(this).toggleClass("active");
}); 
    }); 
   </script>

navbar div を追加する方法を教えてもらえますか? 次の行の後に別の行を追加しますか?

$("#mobimenubg").slideToggle();

または、括弧に含めることができます：

$("#mobimenubg" IN HERE?).slideToggle();

私は慣習を知りません -

大変助かります!!

4

1 に答える 1

0

領域全体を div (mobimenubg) でラップしましたが、メインのナビゲーション バーがその div に含まれていないように動作し、

実際には正しいコードがありますが、HTML 構造がオフになっています。navbar div が mobimenubg div 内に含まれていないことが問題です。そこにnavbarをネストするようにしてください。さもなければ、次のようにnavbarで関数を呼び出すこともできると思います:

$("#navbar").slideToggle();

インスペクターのスクリーンショット

于 2012-07-01T18:17:28.240 に答える