當我點擊任何按鈕時關閉div

我在圖像上有幾個工具提示。如果點擊工具提示，我想滑動打開一個div（帶文本）。使用下面的代碼可以正常工作。當我點擊任何按鈕時關閉div

我無法弄清楚的部分：如果按任何工具提示，我也想關閉任何打開的「tooltip_content」。

我之前做過（使用顯示/隱藏），但沒有想法如何使用幻燈片效果做到這一點。

<div class="tooltip"> 
    <div class="inner"></div> 
    <div class="tooltip_content">Text</div> 
</div> 

$(".tooltip .inner").click(function(){ 
    $(this).next().slideToggle(); 
});

來源

2016-02-01 The Gmo

您可以添加更多的行：

$(".tooltip .inner").click(function() { 
 
    $('.tooltip_content:visible').not($(this).next()).slideUp(); 
 
    $(this).next().slideToggle(); 
 
});

.tooltip_content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tooltip"> 
 
    <div class="inner">inner1</div> 
 
    <div class="tooltip_content">Text1</div> 
 
</div> 
 
<div class="tooltip"> 
 
    <div class="inner">inner2</div> 
 
    <div class="tooltip_content">Text2</div> 
 
</div> 
 
<div class="tooltip"> 
 
    <div class="inner">inner3</div> 
 
    <div class="tooltip_content">Text3</div> 
 
</div>

jQuery對象$('.tooltip_content:visible')將尋找可見tooltip_content DIV，如果找到一個或多個，就會滑到他們但不包括當前對象下一個項目.not($(this).next())。

來源

2016-02-01 08:19:00 Jai

感謝您的回覆。這可以關閉打開的內容塊，但可以使用任何關閉的工具提示，但是如果我點擊具有打開內容的工具提示，內容會立即關閉並再次打開。 –

好吧！你可以把它放在回調中。更新.... – Jai

這不會打開工具提示，如果他們都關閉了... 我可以打開一個div，如果全部關閉或關閉一個開放的工具提示，當我點擊它或關閉工具提示通過點擊另一個。只是讓所有這些效果一起讓我瘋狂;-) –

$(".tooltip_content").click(function(){ 
    $('.tooltip_content:visible').slideToggle(); 
});

使用此代碼會使你的效果。

來源

2016-02-01 08:24:17

當我點擊任何按鈕時關閉div

回答

相關問題