サポート » 使い方全般 » リサイズ時に「div style="display: block;"」タグが自動に追加される

  • 解決済 satoru7777

    (@satoru7777)


    レスポンシブのサイトのナビゲーションメニューで
    リサイズ時に「div style=”display: block;”」が追加されてしまい
    スマホでのナビゲーションが表示されてしまいます。再読込すると消えます。

    https://wordpress.org/themes/linedrawing

    こちらのテーマになりスマホ表示(768px以下)でクリックしてメニューを開いて
    開いたままウインドウサイズを変更(768px以上)にするとモバイル表示のナビゲーションに
    「div style=”display: block;”」が追加されcssのdisplay:none;が効かず表示されてしまいます。
    js書き換え$(window).resize(function() などでリサイズタイマー試してみましたが消えず困っています。

    このリサイズ時にメニューに「div style=”display: block;”」が追加されてしまうのはwordpressの仕様なのでしょうか?もしそうであったらコレを止めたいです。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • このリサイズ時にメニューに「div style=”display: block;”」が追加されてしまうのはwordpressの仕様なのでしょうか?

    そういう事はないと思います。テーマ以外に、何かプラグイン使っていませんか?

    これはこのテーマの不具合のようですね。

    下記内容のjsファイルをjQueryよりあとに読み込めば回避できます。

    jQuery(document).ready(function($) {
    	$(window).on( 'resize', function(){
    	 if ( $(window).width() > 768 ) {
    	 	$('#mobile-navigation .menu').css('display','none');
    	 }
    	});
    });

    あっ、そういう事なんですね

    原因部分がどこにあるのか、ちょっとわかりませんが、そういう事ならCSSでも消せます。

    style.css line:1194

    /* 追加 */
    #restofheader #mobile-navigation{
        display:none!important;
    }
    @media only screen and (max-width: 768px) {
      .widget {
        border: none;
        background-color: #333333;
      }
    
      #wp-calendar {
        margin: 0 0 1.615em;
        width: 100%;
      }
    
      #wp-calendar caption {
        color: white;
        padding: 0.45em 0;
        text-align: center;
      }
    
      #wp-calendar thead th {
        font-weight: bold;
        text-align: center;
      }
    
      #wp-calendar tbody td {
        background: #c5c5c5;
        border: 1px solid;
        border-color: #333333;
        color: #333333;
        padding: 0.45em 0;
        text-align: center;
      }
    
      #wp-calendar tbody .pad {
        background: none;
      }
    
      #wp-calendar tfoot td {
        padding: 0.45em 0 0;
      }
    
      #wp-calendar tfoot #next {
        text-align: right;
      }
    /* 追加 */
     #restofheader #mobile-navigation{
        display:block!important;
      }
    }

    nobitaさん、なるほどです。

    ただ、この部分はハンバーガーアイコンのクリックイベントでjQueryのfadeToggleして、メニューの表示・非表示を切り替えていますので、後半分のCSS指定は追加しないほうがいいと思います。

    あ、PC用の時だけのメディアクエリーにしないといけないかな。

    ikaringさん

    提示した方法は、インラインスタイルを 上書きするために詳細度を強くかけてあるので、後半部分を指定しないとハンバーガーアイコン自体も表示できなくなってしまうので、

    jQueryの挙動に影響があるという事でしたら、没かもしれませんね。

    たぶん、jQueryなんかから、スタイルを追加していると思うんですが 原因部分を把握していないんで、良かったら教えてください。

    あ、ちゃんと要素確認してなかったです。
    #mobile-navigationじゃなくて、その中の.menuをfadeToggleしてます。
    jQueryのfadeToggleはopacityとdisplayをいじるので、ハンバーガーアイコンを押して表示させると、display:blockがインラインに残ってしまうんですよね。

    CSSでやるなら下記だけでいけるんじゃないかと思います。

    @media only screen and (min-width: 768px) {
    	#restofheader .menu{
    		display:none!important;
    	}
    }

    さすが、ですね このやり方が一番シンプルかも、

    テーマのサポートフォーラムに投稿しておきました。
    そのうちアップデートされるかもしれません^^

    https://wordpress.org/support/theme/linedrawing

    トピック投稿者 satoru7777

    (@satoru7777)

    めちゃ遅れましたがありがとうございました。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「リサイズ時に「div style="display: block;"」タグが自動に追加される」には新たに返信することはできません。