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

    });

  });

所以我正在做的是点击切换按钮，当横幅以红色边框动画时，立即将导航栏的原始边框变为黑色。如果横幅正在关闭，则在完成关闭后将原始边框恢复为红色。

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

Jquery toggle（）跟随navbar bootstrap的边框

1 个答案: