Jquery toggle（）按照導航欄引導的邊框

Question

我有一個鏈接到導航欄的Jquery toggle（）函數。當用戶點擊切換按鈕時，它會在導航欄下顯示新內容。我已經對導航欄和切換類應用了一個邊框底部。我希望這個邊框在擴展時跟隨切換。這可能嗎？

我做了一個Bootply來進一步解釋我的觀點。

下面是我的Jquery

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

在slideToggle()方法，你可以把其他功能在動畫完成後執行的操作。新的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"); 

    }); 

    }); 

所以我在做什麼是對的切換按鈕的點擊，請立即關閉導航欄黑色的邊框原來的旗幟動畫出與紅色邊框。如果橫幅正在關閉，則完成關閉後將原始邊框恢復爲紅色。

可能還有其他方法可以做到這一點，但我認爲這可以完成您所追求的目標。