當另一個打開時，如何獲取當前可見（默認隱藏）的slideToggle（）.div關閉？

Question

所以我接近，我想實現的，包括有我的slideToggle .divs接近，當我點擊關閉「鏈接」的div的任何地方什麼（。點擊，.click2）一個明顯的例外......

當我點擊「鏈接1」它做我想要的並顯示.showup然後，如果我點擊「鏈接2」它最初也做我想要什麼，並顯示.showup2 .showup但我需要.showup關閉所以他們並不是同時開放的。

你可以用我提供的代碼中看到這提出了一個問題，BC既「showup」的div已經打開，如果我則直接點擊「鏈接1」再次.showup仍然落後.showup2

隱藏同樣，在上面的例子，如果我先點擊「鏈接2」，.showup2打開，但當我然後直接點擊「鏈接1」，.showup不會出現在.showup2

因此最終我想我的slideToggle div隱藏，當我點擊任何地方在我的「鏈接」divs（.click和.click2）之外 - 它目前做 - 但是，任何地方都應該包括我的其他腳本指示「鏈接」divs！那就是我陷入困境的地方。

這裏是代碼，在非常簡單的例子證明：

HTML

<div class="click">Link 1</div> <div class="click2">Link 2</div> 
<div class="showup">something I want to show</div> 
<div class="showup2">something else I want to show</div> 

SCRIPT

$(document).ready(function(){ 
    $('.click').click(function(event){ 
     event.stopPropagation(); 
     $(".showup").slideToggle("fast"); 
    }); 

}); 

$(document).on("click", function() { 
    $(".showup").hide(); 
}); 


$(document).ready(function(){ 
    $('.click2').click(function(event){ 
     event.stopPropagation(); 
     $(".showup2").slideToggle("fast"); 
    }); 

}); 

$(document).on("click", function() { 
    $(".showup2").hide(); 
}); 

CSS

body{margin:50px;} 

.showup, 
.showup2 { width:100%;height:100px; background:red; display:none; position: fixed;} 

.click, 
.click2 { cursor:pointer; display:inline-block; padding: 0 15px;} 

非常感謝您的幫助！ Jorie

Answer 1

您可以使用相同的class名稱button和boxes。 data-target attr用於指定哪個元素進行切換。

更新與每個按鈕

1. 切換功能
2. Bold文本切換功能添加

$(document).ready(function() { 
 
    $('.click').click(function(event) { 
 
    event.stopPropagation(); 
 
    if($(".showup").eq($(this).attr('data-target')).css('display') == 'block'){ 
 
    $(".showup").eq($(this).attr('data-target')).slideUp(); 
 
     $('.click').removeClass('bold') 
 
    } 
 
    else{ 
 
     $(".showup").hide(); 
 
     $('.click').removeClass('bold') 
 
    $(".showup").eq($(this).attr('data-target')).slideToggle("fast"); 
 
     $(this).toggleClass('bold') 
 
    } 
 
    }); 
 
}).on('click',function(){ 
 
$(".showup").hide(); 
 
    $('.click').removeClass('bold') 
 
})

body { 
 
    margin: 50px; 
 
} 
 

 
.showup{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background: red; 
 
    display: none; 
 
    position: fixed; 
 
} 
 
.bold{ 
 
font-weight:bold; 
 
} 
 

 
.click{ 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding: 0 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="click" data-target="0">Link 1</div> 
 
<div class="click" data-target="1">Link 2</div> 
 
<div class="showup">something I want to show</div> 
 
<div class="showup">something else I want to show</div>