![](/img/trans.png)
[英]I want to toggle div by JavaScript when i click on the button open and close the div
[英]Close div when I click on any button
我在图像上有一些工具提示。 如果单击工具提示,我想滑动打开一个div(带有文本)。 使用下面的代码可以正常工作。
我无法弄清的部分:如果我按下任何工具提示,我也想关闭所有打开的“ tooltip_content”。
我之前确实(使用显示/隐藏)构建了此文件,但是不知道如何使用幻灯片效果来构建它。
<div class="tooltip">
<div class="inner"></div>
<div class="tooltip_content">Text</div>
</div>
$(".tooltip .inner").click(function(){
$(this).next().slideToggle();
});
您可以再添加一行:
$(".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())
。
$(".tooltip_content").click(function(){
$('.tooltip_content:visible').slideToggle();
});
使用此代码将使您产生效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.