javascript - Bootstrap 导航栏切换用于添加类

Question

我在 Wordpress 中使用 Bootstrap V3。

我想要实现的是，当有人在折叠的 navbar 菜单中单击 button 时，带有类 的 div .slider 得到一个额外的类。

这是来自导航栏的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>

这是 div 中的 HTML，我想在其中添加一个额外的类:

<div class="slider">
  <div class="container">
    <div class="row">
      other elements 
    </div> <!-- close row -->
  </div> <!-- close container -->
</div> <!-- close slider -->

我已经用 CSS 试过了:

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

还有 jQuery:

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

应该在slider 上添加的额外类是:

.sliderMove{
  margin-top: -246px;
  padding-top: 176px;
}

这样做的目的是 navbar 之后/下方的 slider 在折叠时保持在 navbar 下方。

Answer 1

您只需连接到可折叠导航栏的 Bootstrap 折叠事件。无需为折叠导航按钮分配额外的点击处理程序。

Collapse Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

这是一个例子。

$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
  $(".slider").addClass("your-class");
})

$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () {
  $(".slider").removeClass("your-class");
})

.slider {
  width: 100%;
  min-height: 100px;
  background-color: tomato;
}

.your-class {
  background-color: lawngreen;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="slider"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>