Bootstrap导航栏切换用于添加类

时间：2016-06-17 10:58:42

标签： javascript jquery html css twitter-bootstrap

我在 Wordpress 中使用 Bootstrap V3 。

我想要实现的是，当有人点击折叠的button菜单中的navbar时，带有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");      
  });
});

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

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

这样做的目的是在navbar之后/之下的滑块在navbar处于折叠状态之后。

5 个答案:

答案 0 :(得分：2)

您愿意点击的按钮是一个班级navbar-toggle，而拥有导航栏的div的ID为navbar。因此，要在按钮上实现点击事件，您必须使用button ID而不是div ID。所以你的jQuery代码就像：

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

当您使用相同的按钮再次折叠菜单时，您想删除该类。

答案 1 :(得分：2)

您只需要挂钩可折叠导航栏的Bootstrap崩溃事件即可。无需为折叠导航按钮指定额外的点击处理程序。

  

Collapse Events

     

Bootstrap的崩溃类暴露了一些事件以挂钩崩溃功能。

这是一个例子。

$('#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>

答案 2 :(得分：1)

尝试这样的事情： （正如您在用户单击导航栏切换按钮时所需，使用jQuery将某个类添加到某个div）

$('body').ready(function() {
    $('.navbar-toggle').on('click', function() {
         $(".slider").toggleClass("sliderMove");  
    }); 
});

答案 3 :(得分：1)

你做得很好但是你需要使用toggleClass()并选择其他不是#navbar

的CSS选择器
  

还可以添加延迟吗？因为在导航栏完全折叠之前已经激活了类。

是的，可以通过添加setTimeout()

来实现 

$(".collapsed").click(function() {
  // toggle the class after half second
  setTimeout(function() {
    $(".slider").toggleClass("sliderMove");
  }, 500);
});
/* just to show in small devices */

@media (max-width: 992px) {
  .sliderMove {
    background: red;
    height: 100vh;
    width: 100%
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="slider"></div>

答案 4 :(得分：0)

试试这个

<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>

Javascript 

$('.navbar-collapse').on('click', function() {
     $(".slider").toggleClass("sliderMove");  
});

CSS 

.sliderMove{
  height:100%;
  width:100%
}

<强> DEMO HERE

相关问题
最新问题