Question

我有三个div col-md-2, col-md-8 and col-md-2。

我想要的是，点击col-md-8 div中的按钮时，剩余的div应该隐藏，col-md-8 div占据整个col-md-12空间。

再次单击col-md-8 div中的按钮，col-md-2 div再次显示，而col-md-8 div占据col-md-8.

的空格

这是否可以通过jquery实现，如果是，那么如何以及如果没有那么我该怎么办？此致

Answer 1

是的，你可以做到。这是一个片段，向您展示实现它的方法。希望它有所帮助！

＆＃13;

$( "#mybutton" ).click(function() {
  if ($( "#two" ).hasClass( "col-xs-8" )) {
    $( "#one" ).hide();
    $( "#three" ).hide();
    $( "#two" ).removeClass( "col-xs-8" );
    $( "#two" ).addClass( "col-xs-12" )
  }
  else {
    $( "#one" ).show();
    $( "#three" ).show();
    $( "#two" ).removeClass( "col-xs-12" );
    $( "#two" ).addClass( "col-xs-8" )
  }
});

＆＃13;

#one {
  background: red;
  height: 50px;
}

#two {
  background: blue;
  height: 50px;
}

#three {
  background: green;
  height: 50px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-xs-2" id="one"></div>
  <div class="col-xs-8" id="two">
    <button type="button" id="mybutton">Hide</button>
  </div>
  <div class="col-xs-2" id="three"></div>
</div>

＆＃13;

如何使用jquery管理div？

1 个答案: