0

次の CSS を使用してタグを非表示#aside-expanderにし、ブラウザーの幅が 1200px 未満の場合に必要に応じてユーザーがタグを表示できるようにタブを表示します。

@media screen and (max-width: 1200px) {
    aside#global-widget-base {
        display: none !important;
    }
    #aside-expander {
        display: inline !important;
    }
}

#aside-expander再度表示するために要素でクリック ハンドラーを使用すると、要素が表示されません。これは、スタイル要素で !important を使用しているためだと思います。

$('#aside-expander').click(function() {
   $("#global-widget-base").css("display", "inline"); 
});

この要素をオンデマンドで表示する方法について、誰かが解決策を提供できるかどうか疑問に思いましたか? 私はすでに !important を jQuery .css 関数に適用しようとしましたが、役に立ちませんでした。

4

1 に答える 1

1

AurelioDeRosa が述べているように、本当に必要!importantな場合は、自分が持っているものを実装する別の方法を検討する必要があります。

ただし、必要に応じて、これを回避する 1 つの方法は、クラスを javascript からのスイッチとして使用して、状態をオンまたはオフにすることです。たとえば、次のようになります。

@media screen and (max-width: 1200px) {
  aside#global-widget-base {
    display: none !important;
  }
  #aside-expander {
    display: inline !important;
  }
  aside#global-widget-base.hide-disabled {
    display: block !important;
  }
}

hide-disabled次に、JavaScript でクラスを追加または削除するだけです。明らかに、これは好みに応じて調整でき、状況の要請に応じて調整できます。私は一般的に html 要素から上に向かって作業することを好むので、私の JavaScript はページの「モード」を切り替えますが、これは特定のものではなく、ページ全体に関連する効果にのみ使用する必要があります。

var states = 'full-collapse half-collapse no-collapse';

// remove all collapsing
$('html').removeClass(states).addClass('no-collapse');

// add collapse back
$('html').removeClass(states).addClass('full-collapse');
于 2013-07-01T11:06:53.267 に答える