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

【问题标题】：Open close toggle button. Hide first button when opened打开关闭切换按钮。打开时隐藏第一个按钮
【发布时间】：2019-11-25 11:09:43
【问题描述】：

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

这是我所拥有的：

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>

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

【问题讨论】：

将jQuery(".slider").toggle('slow') 更改为jQuery(".slider,.clicker").toggle('slow')
您能具体解释一下您遇到困难的部分吗？你有代码来处理点击事件，你有代码来切换可见性，你不需要其他任何东西。

标签： jquery toggle

【解决方案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>

【讨论】：

【解决方案2】：

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

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

更新了sn-p：

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>

【讨论】：