Question

我有一个按钮，如果单击该按钮，则文本应为.slideDown()。如果再次单击该按钮，则文本应为.slideUp()。

HTML

<div id="button">CLICK ME!</div>
<div id="text" style="display:none;">
    Example Text
</div>

的jQuery

$('#button').on('click', function() {
    $('#text').slideDown();
    $('#button').addClass('button-clicked');
});
$('#button.button-clicked').on('click', function() {
    $('#text').slideUp();
    $('#button').removeClass('button-clicked');
});

有更简单的解决方案吗？

Answer 1

没有必要 - 只需使用slideToggle()代替：

$("#button").click(function() {
   $("#text").slideToggle();
   $(this).text(function(i, text){
       return text === "Up" ? "Down" : "Up";
   });
});

jsFiddle here.

Answer 2

只需使用slideToggle（）

$("#button").click(function() {
   $("#text").slideToggle(); //will handle slides  automatically
});

Answer 3

每次执行.click()时，都会附加一个新的事件处理程序。因此，当按钮被单击两次时，每次单击按钮时会触发两个事件处理程序，一个向下滑动，一个向下滑动。

如果您需要在每次单击时更改按钮的ID，请执行以下操作：

$("#button").click(function() {
  $("#text").slideToggle();
  $(this).attr("id", $(this).attr("id") == "button" ? "button-clicked" : "button");
});

即使ID正在更改，单击处理程序也会保持附加到该按钮元素。

如果id更改只是通过CSS触发不同的外观，则更常规的方法是$(this).toggleClass("clicked")，然后在#button.clicked中定义单击状态。

jQuery：如何通过滑动交替显示和隐藏元素？

3 个答案: