Question

我有一个打开/关闭开关，我试图使第一个按钮在打开时隐藏，然后在关闭时重新出现。

这就是我所拥有的：

jQuery.noConflict();

jQuery(document).ready(function() {
  jQuery(".slider").hide('slow');

  jQuery(".clicker, .clicker2").click(function() {
    jQuery(".slider").toggle('slow');
    return false;
  });
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clicker">CLICK HERE</button>
<div class="slider">
  Blah blah blah
  <a class="clicker2" href="#">Close</a>
</div>

任何帮助将不胜感激。谢谢。

Answer 1

您必须将.clicker和.clicker2点击事件分开。然后，切换.slider和.clicker按钮。

这是演示

$(document).ready(function() {
  jQuery.noConflict();
  jQuery(document).ready(function() {
    jQuery(".slider").hide('slow');

    jQuery(".clicker").click(function() {
      jQuery(".slider").toggle('slow');
      jQuery(this).toggle('slow');
      return false;
    });
    jQuery(".clicker2").click(function() {
      jQuery(".slider, .clicker").toggle('slow');
      return false;
    });
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clicker">CLICK HERE</button>
<div class="slider">
  Blah blah blah
  <a class="clicker2" href="#">Close</a>
</div>

Answer 2

您已经具有基于单击进行切换的代码，因此您可以将“打开”按钮添加到切换代码中，就像将click事件应用于多个元素一样。

jQuery(".slider,.clicker").toggle();

更新的代码段：

jQuery.noConflict();

jQuery(document).ready(function() {
  // hidden in the HTML to remove FOUC: jQuery(".slider").hide('slow');

  jQuery(".clicker, .clicker2").click(function() {
    jQuery(".slider,.clicker").toggle('slow');
    return false;
  });
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clicker">CLICK HERE</button>
<div class="slider" style='display:none;'>
  Blah blah blah
  <a class="clicker2" href="#">Close</a>
</div>

打开关闭切换按钮。打开时隐藏第一个按钮

2 个答案: