0

私のWebサイトで完全に実行されているjquery関数があり、インラインブロックリストを含む非表示のダイブを隠して表示します。

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.noConflict();
jQuery('#mdiv').click(function(){jQuery('#subNav').slideToggle(1000)});
jQuery("#subNav").mouseleave(function () {jQuery('#subNav').slideToggle(1000)});
});
</script>

今、私はメディア クエリを使用してスマートフォン用のレスポンシブ Web ページとレスポンシブ CSS ナビゲーションを作成しようとしています。私がやりたいことは、デスクトップのような通常のビューポート画面で jquery を有効にし、代わりにレスポンシブ スマートフォン サイズで 4 つの新しい li を ol に追加することです。これがレスポンシブナビゲーションの私のコードです

enter code here
@media only screen and (min-width: 0px) and (max-width: 479px) {
#nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px; background:none; }
#nav { margin: -20 2% 0 0; padding: 0; }
#nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }
#nav a { width:150px; margin-top: 5px; padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(images/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#nav a:hover { border-bottom: none; }
}

ビューポート サイズに基づいて 2 つの jquery 関数を実行する方法を教えてください。

ありがとう

4

1 に答える 1

1

これは、機能面で探しているものではないかもしれませんが、試してみることができます: http://jsfiddle.net/XvzD7/1/

匿名コールバックをウィンドウresizeイベント トリガーにバインドすることにより、ウィンドウの幅が必要な量よりも小さくなったり大きくなったりするたびにコードを実行できます。上記の例background-colorでは、#container div.

詳細については、この記事の「Javascript ペアリング」セクションを参照してください: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

私の答えが答えよりも多くの質問を提供するかどうか教えてください。お役に立てれば！

于 2012-12-18T01:57:22.347 に答える