jQueryのトグル（）私は、ナビゲーションバーにリンクされているjQueryのトグル（）関数を持っているナビゲーションバーのブートストラップ

Question

上の国境に従ってください。ユーザーがトグルボタンをクリックすると、ナビゲーションバーの下に新しいコンテンツが表示されます。 navbarとtoggleクラスにborder-bottomを適用しました。私は、この国境が拡大するにつれてトグルに従うことを望んでいます。これは可能ですか？

私はさらに私のポイントを説明するためにBootplyを行いました。

は、以下の私のjqueryのアニメーションが完了した時点でアクションを実行するために別の関数を置くことができslideToggle()方法で

jQuery(document).ready(function($) { 

$banner = $(".banner"); 
$banner.hide(); 
$(".show-banner").on("click", function() { 
    if ($(".banner").is(":hidden")) { 


       $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: border-bottom:4px solid #ff0000;!important').delay(5000); 

      } else { 
        $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: border-bottom:4px solid #ff0000; !important').delay(5000); 

      } 
    $banner.slideToggle() 

    $(".navbar-collapse.collapse").addClass("hide-all"); 


}); 

}); 

Answer 1

です。新規bootply。

jQuery(document).ready(function($) { 

    $banner = $(".banner"); 
    $banner.hide(); 
    $(".show-banner").on("click", function() { 
     $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: 4px solid #000 !important';).delay(5000); 

     $banner.slideToggle(function(){ 
     if ($(".banner").is(":hidden")) { 
      $("nav.navbar.navbar-inverse").attr('style', 'border-bottom: 4px solid #ff0000 !important;').delay(5000); 
     } 
     }); 

     $(".navbar-collapse.collapse").addClass("hide-all"); 

    }); 

    }); 

それでは、私がやっていることはバナーは赤枠で出アニメーション化して、すぐにナビゲーションバーブラックのオリジナルボーダーを回し、トグルボタンのクリックです。バナーが閉じている場合は、クロージングの完了時に元の枠を赤に戻します。

は、おそらくこれを行うには、他の方法がありますが、私は、これはあなたが後にしているものを実現すると思います。