Question

我想只使用一个按钮来控制打开和关闭一个非画布菜单。所以我创建了一个带有OpenButton类的按钮，打开菜单，点击后，删除OpenButton类并添加CloseButton类，这些都像魅力一样，但当我调用{{1在} Click Event它不起作用，问题是什么？这是我的代码：

CloseButton

Answer 1

由于您要动态添加类，因此需要使用事件委派来为事件处理程序机制注册相同的内容，

$(document).on('click', ".CloseButton", function() {
    alert('Close');       
});

希望这有帮助！

Answer 2

这是因为click事件在运行时绑定。由于执行代码时.CloseButton不存在，因此不会将click事件绑定到它。一种解决方案是使用$(document).on('click', '.CloseButton', function() {...})来做到这一点，但这被认为是资源密集型和不必要的重复性。

我建议你不要改变按钮的类。如果要在打开/关闭按钮时修改按钮的样式或外观，可以通过添加类而不是交换类来实现，例如：

$('.button').click(function() {
    $(this).toggleClass('is-open');
});

在这种情况下，您还可以在jQuery的数据对象中存储按钮的状态。这将抽象根据它的类来读取DOM中对象的状态：

＆＃13;

$(function() {
  $('.button').click(function() {
  
    // Store state
    if ($(this).data('is-open')) {
      $(this).data('is-open', false);
      alert('closing!');
    } else {
      $(this).data('is-open', true);
      alert('opening!');
    }
    
    // Toggle class
    $(this).toggleClass('is-open');
    $('.toggleTarget').toggleClass('is-hidden');
  });
});

＆＃13;

.is-hidden {
  display: none;
}

.button {
  background-color: steelblue;
  color: #fff;
  display: inline-block;
  padding: 10px;
}

.button.is-open {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="button">Toggle</a>
<div class="toggleTarget is-hidden">I am content that is toggled.</div>

＆＃13;

使用jQuery创建切换按钮

2 个答案: