Question

我一直在尝试创建一个幻灯片切换按钮，在按钮外单击时会隐藏所有切换按钮。它已经完成了。我的问题是我需要为每个按钮创建脚本以显示和隐藏工具提示/内容。有没有办法在单个脚本中执行此操作，以便在添加更多按钮和内容时，我不必添加更多脚本？提前谢谢。

这是html：

＆＃13;

$(document).ready(function() {
  var $content = $(".tooltip1").hide();
  $(document).on("click", function(e) {
    if ($(e.target).is(".button1")) {
      $content.slideToggle();

    } else {
      $content.slideUp();
    }
  });
});
$(document).ready(function() {
  var $content = $(".tooltip2").hide();
  $(document).on("click", function(e) {
    if ($(e.target).is(".button2")) {
      $content.slideToggle();

    } else {
      $content.slideUp();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="toggle1">
  <a class="button1 button" href="#">Button 1</a>
  <p class="tooltip1 tooltip">Tooltip1</p>
</div>
<div class="toggle2">
  <a class="button2 button" href="#">Button 2</a>
  <p class="tooltip2 tooltip">Tooltip2</p>
</div>

＆＃13;

Answer 1

肯定是

＆＃13;

$(function() {
  $(document).on("click",function(e) {
    if (!$(e.target).hasClass("button")) {
      $(".tooltip").slideUp();
    }
  });
  $(".button").on("click", function(e) {
    e.preventDefault(); // cancel click
    $(".tooltip").slideUp(); // can test here to not yoyo
    $(this).next().slideToggle(); 
    // or $(this).parent().find(".tooltip").slideToggle(); if not next to link
  });
});

＆＃13;

.tooltip {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="toggle1">
  <a class="button" href="#">Button 1</a>
  <p class="tooltip">Tooltip1</p>
</div>
<div class="toggle2">
  <a class="button" href="#">Button 2</a>
  <p class="tooltip">Tooltip2</p>
</div>

＆＃13;

用于fadetoggle的单个脚本

1 个答案: