Question

我在图像上有一些工具提示。如果单击工具提示，我想滑动打开div（带文本）。使用下面的代码可以正常工作。

我无法理解的部分：如果我按下任何工具提示，我也想关闭任何打开的“tooltip_content”。

我之前构建了这个（使用显示/隐藏），但我没有想法如何使用幻灯片效果。

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

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

Answer 1

您可以再添加一行：

＆＃13;

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

＆＃13;

.tooltip_content {
  display: none;
}

＆＃13;

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

＆＃13;

jQuery对象$('.tooltip_content:visible')将查找可见的tooltip_content div，如果找到一个或多个div，它会向上滑动它们，但用.not($(this).next())排除当前对象的下一个项目。< / p>

Answer 2

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

使用此代码会产生效果。

单击任何按钮时关闭div

2 个答案: