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"); 

    }); 

    }); 

所以我在做什么是对的切换按钮的点击，请立即关闭导航栏黑色的边框原来的旗帜动画出与红色边框。如果横幅正在关闭，则完成关闭后将原始边框恢复为红色。

可能还有其他方法可以做到这一点，但我认为这可以完成您所追求的目标。