1

3つの列を1つに折りたたむレスポンシブデザインがあり（ただし、この列内では3つのカテゴリを分離したままにします）、カテゴリを切り替えて、各カテゴリのコンテンツを表示および非表示にします。

ただし、私の問題は、ブラウザウィンドウのサイズを変更して、3つの列が再び横に浮いていることを確認すると、値が表示されることです。まだそこにあります。

/************************************************************************************
smaller than 990
*************************************************************************************/
@media screen and (max-width: 990px) {

    .sn{
    display: block;
    margin: 25px;
    }   

}

/************************************************************************************
smaller than 720
*************************************************************************************/
@media screen and (max-width: 720px) {
    .sn {
    display:none;
    }
}

トグルのjQueryコード：

// Start function when DOM has completely loaded
$(document).ready(function(){
    var $open = $();
    $('#wb .cat_responsive').on('click', function(e){
      e.preventDefault();
      $open.slideUp();
      $open = $(this).closest('.sn_cat').find('.sn');
      $open.not(':animated').slideToggle();
    });
    $('.cat_responsive').get().hideFocus = true;
});
4

2 に答える 2

0

問題は、.toggle() を使用する場合、jQuery が「display: block」を css ファイルではなく HTML タグに直接追加することです。

例：

あなたの要素が次のとおりだとしましょう：

<div id="mini-navLinks">

jQuery .toggle() を使用すると、次のようになります。

<div id="mini-navLinks" style="display: block">

また

<div id="mini-navLinks" style="display: none">

問題はもうお分かりだと思います。これらの属性は要素に固定されています。したがって、CSS に「display: none」プロパティが設定されていても、ブラウザのサイズが変更されると、要素のタグで指定されたスタイルから読み込まれます。

私は自分でこの問題に遭遇したばかりで、数行の jQuery を使用して問題を解決するための簡単なハックを作成しました。

    $(window).resize(function() {   
        if($(window).width() > 769)
        {
             $('#mini-navLinks').hide();
        }
    });

切り替えている要素に応じて、それらを非表示にする指定された画面幅で jQuery にハードコードする必要があります。上記のコードを使用すると、ユーザーのブラウザーの幅が 769 ピクセルを超えると、jQuery は #mini-navLinks 要素を .hide() します。メソッド .hide() は、すでに非表示になっていても機能するため、追加のチェックは必要ありません。

ユーザーがデザインをいじるためにブラウザーのサイズを変更することはめったにないという点で、私は Blazemonger に同意します。また、これは簡単な修正でした。他の誰かがより良い解決策を持っている場合は、もっと聞いてみたいと思います.

于 2012-11-06T03:16:36.757 に答える
0

display:none の代わりに、次を使用してみてください。

visibility:hidden;
visibility:visible;
于 2012-10-23T14:18:10.747 に答える