寫一個jQuery點擊當前按鈕操作對應區塊並隱藏其他非點擊按鈕對應區塊(類似滑動選單收合效果)-教學撰寫:徐嘉裕Neil hsu

簡單來說，就是作用中的按鈕觸發對應的區塊開啟或關閉，其他非作用中按鈕對應的區塊自動隱藏，類似滑動選單的原理如下圖這樣：

當點擊按鈕1時開啟區塊1，若再次點擊按鈕1則區塊1隱藏(收合)

當點擊按鈕2時開啟區塊2，並吧按鈕1的區塊隱藏，這樣就會一值保持只有一個被點擊的按鈕在操作區塊開啟或隱藏

code如下

//html結構

<a type='button' class='openbtn1 btn btn-md btn-info active openadmin'>按鈕1</a>
<div class='openbox1 openboxArr'>區塊1區塊1區塊1</div>

<a type='button' class='openbtn2 btn btn-md btn-info active openadmin'>按鈕2</a>
<div class='openbox2 openboxArr'>區塊2區塊2區塊2</div>

<script>nopenadminfunction();</script>

//js code

function nopenadminfunction() {
$('.openboxArr').hide();
$(".openadmin").each(function(index) {
var $topindex = index;
var $openbtn = '.openbtn' + (index + 1);
var $openbox = '.openbox' + (index + 1);
$("body").on("click", $openbtn, function(e) {
//非點擊區隱藏內容
$(".openboxArr").each(function(index) {
if ($topindex != index) $('.openbox' + (index + 1)).hide();
});
//點擊區開啟關閉內容
$($openbox).slideToggle("fast");
})
});
}

基本上就是滑動選單的原理，開啟一個區塊其他的就隱藏，只是用在UI介面上，可以做為收納管理選單或收納內容用途釋放空間，有需要的朋友參考看看!!

工作心得撰寫：徐嘉裕 Neil hsu