Question

当页面加载时我想显示2个col-md-6 div和一个按钮说“点击显示第三个div”。如果有人点击按钮，我想切换第三个div col-md-4并将之前的2个col-md-6更改为col-md-4。将按钮更改为“单击以隐藏第3个div”

HTML

<div class="container">
<h1>Hello World!</h1>
<div class="row pull-right" style="margin-bottom:10px;"> <button class="btn btn-primary" id="btncontrol">Click to Add </button> </div>
<div style="clear:both">
    <div class="row">
        <div class="col-sm-6" id="col_fld_6" style="background-color:lavender;">.col-sm-4</div>
        <div class="col-sm-6" id="col_fld_62" style="background-color:lavenderblush;">.col-sm-4</div>
        <div class="col-sm-4" style="background-color:#E6B2A4;display:none" id="last_div">.col-sm-4</div>
    </div>
</div>

Answer 1

使用add和removeClass

$('#btncontrol').click(function(){
  $('div[id^="col_fld"]').removeClass('col-sm-6').addClass('col-sm-4');
  $('#last_div').show();
});

https://jsfiddle.net/1boyw5oe/

或：

$('#btncontrol').click(function(){
  $('div[id^="col_fld"]').toggleClass('col-sm-6').toggleClass('col-sm-4');
  $('#last_div').toggle();
});

https://jsfiddle.net/1boyw5oe/1/

Answer 2

以下是您需要的HTML和JS。

<强> FIDDLE

<强> HTML

<div class="row all-three-div">
    <div class="col-md-6">Div 1</div>
    <div class="col-md-6">Div 2</div>
    <div class="col-md-4" style="display:none;">Div 3</div>
</div>

<button id="showThirdDiv">Click to show third Div</button>

<强>的jQuery

jQuery(document).ready(function(){
    jQuery('#showThirdDiv').click(function(){
        jQuery('.all-three-div div').removeClass('col-md-6').addClass('col-md-4').show();
    });
});

您需要在三个div中添加一个班级all-three-div。父母div。

使用jquery按钮单击更改bootstrap div类

2 个答案: