Javascript 引导导航栏切换用于添加类

我在Wordpress中使用Bootstrap V3

我想要实现的是，当有人单击折叠的

导航栏

菜单中的

按钮时，带有类
滑块的
div
会得到一个额外的类

这是导航栏中的HTML：

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <?php
        wp_nav_menu( array(
            'theme_location'    => 'navbar-right',
            'depth'             => 2,
            'menu_class'        => 'nav navbar-nav navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

.navbar-default .navbar-collapse .in ~ .slider{
   margin-top: -246px;
   padding-top: 176px;
}

$(function() {                       
  $("#navbar").click(function() {  
    $(".slider").addClass("sliderMove");      
  });
});

我已经用CSS尝试过了：

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <?php
        wp_nav_menu( array(
            'theme_location'    => 'navbar-right',
            'depth'             => 2,
            'menu_class'        => 'nav navbar-nav navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

.navbar-default .navbar-collapse .in ~ .slider{
   margin-top: -246px;
   padding-top: 176px;
}

$(function() {                       
  $("#navbar").click(function() {  
    $(".slider").addClass("sliderMove");      
  });
});

这与jQuery一起使用：

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <?php
        wp_nav_menu( array(
            'theme_location'    => 'navbar-right',
            'depth'             => 2,
            'menu_class'        => 'nav navbar-nav navbar-right',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

.navbar-default .navbar-collapse .in ~ .slider{
   margin-top: -246px;
   padding-top: 176px;
}

$(function() {                       
  $("#navbar").click(function() {  
    $(".slider").addClass("sliderMove");      
  });
});

应在滑块上添加的额外类为：

这样做的目的是，当
导航栏
折叠时，位于
导航栏
后面/下面的滑块位于
导航栏
下面。
尝试以下操作：
（根据用户单击导航栏切换按钮时的需要，使用jQuery将特定类添加到特定div）

您做的一切都很好，但是您需要使用
toggleClass（）
并选择其他不是
#navbar

是否也可以添加延迟？因为在导航栏完全折叠之前，类已经被激活

是的，通过添加
setTimeout（）


$（“.collapsed”）。单击（函数（）{
//半秒后切换类
setTimeout（函数（）{
$（“.slider”）.toggleClass（“sliderMove”）；
}, 500);
});
/*仅在小型设备中显示*/
@介质（最大宽度：992px）{
.sliderMove{
背景：红色；
高度：100vh；
宽度：100%
}
}

切换导航






















提交

















您愿意单击的按钮具有类
导航栏切换
，并且具有导航栏的div具有id
导航栏
。因此，要在按钮上实现单击事件，您必须使用
按钮
id，而不是
div
id。因此，您的jQuery代码如下所示：

$('.navbar-toggle').click(function(){
   if($('#navbar').hasClass('in')){
       $(".slider").addClass("sliderMove");
   }else{
       $(".slider").removeClass("sliderMove");
   }
});

因为您想在使用相同的按钮再次折叠菜单时删除该类。
请尝试此操作

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
    <div class="slider">
  <div class="container">
    <div class="row">
      other elements 
    </div> <!-- close row -->
  </div> <!-- close container -->
</div> 
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

CSS

您只需挂接可折叠导航栏的引导折叠事件。无需为折叠导航按钮指定额外的单击处理程序


Bootstrap的collapse类公开了一些事件，用于连接到折叠功能中

这里有一个例子


$（'#bs-example-navbar-collapse-1'）。on（'show.bs.collapse'，function（）{
$（“.slider”）.addClass（“您的类”）；
})
$（'#bs-example-navbar-collapse-1'）。on（'hide.bs.collapse'，function（）{
$（“.slider”）.removeClass（“您的类”）；
})
滑块{
宽度：100%；
最小高度：100px；
背景色：番茄；
}
.你们班{
背景色：蓝绿色；
}

切换导航



太好了，它正在工作！是否也可以增加延迟？因为在导航栏完全折叠之前，这个类已经被激活了。这是后来的网站。延迟没有解决问题，我发现我需要一个动画。我确实振作起来了，谢谢你的帮助！