Question

我尝试使用jQuery隐藏按钮点击并显示元素。我有以下代码：

$(function(){
  $('#link-form').hide()
  $('#link-submit').hide()

  $('#main-header-submit').on("click", function() {
    $('#link-form').show();
    $('#main-yield').fadeTo("fast", 0.2)
    $(this).on("click", function() {
      $('#link-form').hide()
      $('#main-yield').fadeTo("fast", 1)
    })
  })
})

当我单击'main-header-submit'按钮时，这会成功显示和隐藏div，但是当我单击按钮（实际上是第三次）使元素再次显示时，没有任何反应。任何帮助非常感谢。

Answer 1

如果您像这样重写代码，它应该可以工作：

$(function(){
  $('#main-header-submit').on("click", function() {
    $('#link-form').toggle("fast");
  })
})

toggle函数隐藏元素（如果它们被显示），如果它们被隐藏则显示它们。点击http://api.jquery.com/toggle/

Answer 2

使用toggle()和fadeToggle

$('#main-header-submit').on("click", function() {
  $('#link-form').toggle();
  $('#main-yield').fadeToggle("fast")
})

Answer 3

问题是因为您在每次连续点击时附加了另一个TimeZoneInfo处理程序。第一个显示click，而第二个隐藏它。这就是为什么你永远不会看到任何变化。

从我所看到的代码中，为了达到您的要求，您只需使用link-form和toggle()代替三元组。试试这个：

fadeTo()

Working example

Answer 4

基本上，使用$("selector").on('click', function() { ... });会在该元素的click事件上运行...。

在...函数定义中，您将被另一个函数覆盖.on('click')。

换句话说，第一次单击时，您告诉代码显示您的元素，然后重新绑定单击以隐藏。因此，每次后续点击都会隐藏已隐藏的元素。

你需要做的是这样的事情：

$('#main-header-submit').on("click", function() {
  if ($(this).is(":visible")){
    $('#link-form').hide()
    $('#main-yield').fadeTo("fast", 1)
  }
  else{
    $('#link-form').show();
    $('#main-yield').fadeTo("fast", 0.2)
  }
});

jQuery按钮只能单击一次

4 个答案: