用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

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;