用jquery展开、折叠功能

Question

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

|第 1 栏 | Col2 | Col3 | Col4 |

| Btn1 | btn2 | btn3 | btn4 |

例如，当我点击 btn2 时，页面变为：

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