2016-08-18 6 views
1

ブートストラップメニューを作成しましたが、画面解像度が767px未満の場合はクラスと属性を追加する必要があります。私のコード:addClass JavaScriptの画面解像度が767px未満の場合

<li class="item-104 deeper parent"> 
    <a href="#">О министерстве</a> 
    <ul class="nav-child unstyled small"> 
     <li class="item-113"><a href="#">Новости</a> 
     </li> 
     <li class="item-134"><a href="#">Подразделения Министерства</a> 
     </li> 
     <li class="item-135 deeper parent"> 
     <a href="#">Подведомственные учреждение министерства</a> 
      <ul class="nav-child unstyled small"> 
       <li class="item-159"><a href="#">ФОК «ЖАР» МВД Республики Узбекистан</a> 
       </li> 
      </ul> 
     </li> 
     <li class="item-136"><a href="#">Прием на службу в органы внутренних дел</a> 
     </li> 
     <li class="item-177"><a href="#">Тендеры</a> 
     </li> 
    </ul> 
</li> 

<script> 
    $(document).ready(function() { 
     $(window).resize(function(){ 
     var windowWidth = $(window).width(); 
     if(windowWidth < 767)$(".navbar-nav ul").addClass("dropdown-menu") && $(".navbar-nav li",".navbar-nav ul").removeClass("parent","nav-child"); 
     }); 
    }); 
</script> 

と私はULのサブディレクトリを持っているリンクに=属性データトグルを追加し、「ドロップダウン」したい、すなわち<li><a href="#" data-toggle="dropdown"><ul><li>などの問題が&&の間であるように思わ

+0

あなたは@mediaクエリ(https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)を使用する場合は、簡単には、JavaScriptなしで要求のこの種を達成することができます。 – Roberrrt

+0

@Roberrrtは私の例でそれを行う方法を示すことができましたか? – TriSTaR

+0

もちろん!私はいくつかのコードを書いてみましょう;)! – Roberrrt

答えて

2

$(".navbar-nav ul").addClass("dropdown-menu")$(".navbar-nav li",".navbar-nav ul").removeClass("parent","nav-child");

その代わりに、この

ようにする必要がありますまた、この同じことがCSSのメディアを使用して達成することができる

クエリ(代替として要求されるように)

@media screen and (max-width: 800px) { 
    body { 
    background-color: #FF0; 
    } 
} 

この例では、黄色に本体の背景色を変更

+0

ユーザーが画面の解像度を変更したときに私のサイズ変更(jquery code)がトリガされます。画面の幅を知っていて、それを見てクラスを追加して削除することは可能でしょうか? – TriSTaR

2

Mediaqueriesたび画面の画面はで、より小さい800ピクセルです。

これはどのようにお客様のケースに適用しますか?

事前に使用するすべてのクラスを適用し、メディアクエリで呼び出す必要があるクラスのマークアップをラップします。

@media screen and (max-width: 800px) { 
    .dropdown-menu { 
    /* CSS that invokes the dropdown */ 
    } 
} 
@media screen and (min-width: 801px) { 
    .nav-child { 
    /* CSS that is being used in medium/large screens */ 
    } 
} 
+1

ooh no ...私はこれを知っている)))私はちょうど不要なクラスを削除し、代わりに新しいクラスを追加したい – TriSTaR