jqueryを使ってdivを管理するには？

Question

私はcol-md-2, col-md-8 and col-md-2と3つのdivを持っています。

は、私が欲しいのはcol-md-8のdivのボタンをクリックの上、両方の非表示にする残りのdivとcol-md-8 div要素がいっぱいcol-md-12スペースを占有していることです。

再びcol-md-8のdivのボタンをクリックの上、両方col-md-2 div要素が再び表示され、centeral col-md-8 div要素がcol-md-8.

のスペースを占有jqueryのことで、この達成可能YESである場合、その後どのようにしてケースに無その後、私は何べき行う？ よろしくお願いします。ありがとうございます。

Answer 1

はい、できます。ここに、それを達成する方法を示すスニペットがあります。 お手伝い願います！

$("#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") 
 
    } 
 
});

#one { 
 
    background: red; 
 
    height: 50px; 
 
} 
 

 
#two { 
 
    background: blue; 
 
    height: 50px; 
 
} 
 

 
#three { 
 
    background: green; 
 
    height: 50px; 
 
}

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