使用jquery展开，折叠功能

Question

我在1页有4列，每个都有一个按钮来执行功能来折叠/展开div并隐藏其他列。 再次点击该按钮会将页面移动到初始状态。流程如下：

| Col 1 | Col2 | Col3 | Col4 |

| Btn1 | btn2 | btn3 | btn4 |

当我点击BTN2例如页面变为：

| Col 2 | （宽度= 100％）

| Btn 2 |

我如何能做到这一点与jQuery

的HTML代码在这里：

<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn1</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 
<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn2</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 
<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn3</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 
<div class="block-panel col s3"> 
    <div class="col s12 headding-panel"> 
     <div class="col s10"> 
      abcxyz 
     </div> 
     <div class="col s2"> 
      <a class="waves-effect waves-light btn">btn4</a> 
     </div> 
    </div> 
    <div class="block-panel-body"> 
     CONTENT GOES HERE 
    </div> 
</div> 

Answer 1

这是我会怎么做。添加和删​​除隐藏所需部件并显示所需部件的类。祝你好运。

$(".btn").on("click", function(){ 
 
    
 
    if($(this).closest(".block-panel").hasClass("showSingle")){ 
 
    
 
    $(".block-panel").removeClass("hidden"); 
 
    $(".block-panel").removeClass("showSingle"); 
 
    $(".block-panel").addClass("showAll"); 
 
    
 
    } else { 
 
    
 
    $(".block-panel").removeClass("showAll"); 
 
    $(".block-panel").removeClass("showSingle"); 
 
    $(".block-panel").addClass("hidden"); 
 
    
 
    $(this).closest(".block-panel").addClass("showSingle"); 
 
    } 
 
    
 
});

.btn { 
 
    background: #CCC; 
 
} 
 

 
.btn:hover { 
 
    cursor: pointer; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.showSingle { 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
    outline: 1px dashed #CCC; 
 
} 
 

 
.showAll { 
 
    display: block; 
 
    float: left; 
 
    width: 25%; 
 
    outline: 1px dashed #CCC; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn1</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 1 
 
    </div> 
 
</div> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn2</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 2 
 
    </div> 
 
</div> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn3</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 3 
 
    </div> 
 
</div> 
 
<div class="block-panel col s3 showAll"> 
 
    <div class="col s12 headding-panel"> 
 
     <div class="col s10"> 
 
      abcxyz 
 
     </div> 
 
     <div class="col s2"> 
 
      <a class="waves-effect waves-light btn">btn4</a> 
 
     </div> 
 
    </div> 
 
    <div class="block-panel-body"> 
 
     CONTENT GOES HERE 4 
 
    </div> 
 
</div>