Question

我设法创建了一个显示我的div的按钮。但是我希望按钮在发生时消失。

此刻，我的按钮仅在第二次单击时消失。任何帮助表示赞赏。

$(document).ready(function() {
  $('.click').click(function() {
    $('#contact-form').toggle('slide', 500)
    $('.click').toggle();
  });
});

.click {
  display: block;
}

#contact-form {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>

Answer 1

它不起作用的原因是，你在CSS和JavaScript之间混合了display。当您使用.toggle()时，jQuery使用当前的内联样式来检查按钮是否被隐藏以显示它。由于它最初没有任何内容，因此它会添加display: block（或初始值为），然后当您第二次执行时，它会正确识别并删除。

最好的办法是使用课程。我会建议像这样的父类。

＆＃13;

$(document).ready(function() {
  $('.click').click(function() {
    $("body").toggleClass("contact-form-open");
  });
});

＆＃13;

.contact-form-open .click,
#contact-form {
  display: none;
}
.contact-form-open #contact-form {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
  Contact Form
</div>

＆＃13;

这样，您可以使用CSS控制所有内容，并且不会搞乱事件监听器或添加令人讨厌的内联CSS。

Answer 2

但是我希望按钮在发生时消失。

所以只需使用hide()代替toggle：

$('.click').click(function() {
    $('.click').hide();
    $('#contact-form').toggle('slide', 500) 
});

希望这有帮助。

$(document).ready(function() {
  $('.click').click(function() {
    $('.click').hide();
    $('#contact-form').toggle('slide', 500) 
  });
});

#contact-form {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>

Answer 3

我已经尝试过你尝试过的东西，它似乎正在起作用。也许是因为你没有关闭div标签？

$(function() {

  $('.click').click(function() {
    $('.myDiv').toggle();
    $('.click').toggle();
  })

});

http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview

Answer 4

更简单：

    $(document).ready(function() {
      $('.click').click(function() {
        $("#contact-form").show();
        $(this).remove();
      });
    });

#contact-form{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button class="click">Click Me</button>
    <div id="contact-form">
      Contact Form
    </div>

单击按钮显示div，然后删除按钮

4 个答案: