Jquery点击不提交表单

Question

我已经包含了一个非常简化的示例来说明我遇到的情况。我有一个 ajax 迷你购物车，它是一种滑出的形式。我有一个“关闭购物车”按钮，只是假设它隐藏了购物车，但on.("click", 由于它包裹在表单元素中，因此无法正确触发。由于它的构建方式，我无法将关闭按钮从表单中移除。$("#open-slider").on ("click", () => {  $("#slider").css("opacity","1");});$("#close-slider").on ("click", () => {  $("#slider").css("opacity","0");});.header {  width:100vw;  height:60px;  background-color:red;}#slider {  height:100px;  width:100px;  background-color:blue;  opacity: 0;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="header">    <button id="open-slider">    Open slider  </button>  <form id="slider">    <div class="slider-header">      <button id="close-slider"> close </button>    </div>  </form></div>

Answer 1

这是因为正在提交表单。你必须防止这样的事件：

$("#close-slider").on("click", e => {

  $("#slider").css("opacity","0");

  e.preventDefault();

});

示例小提琴。

请注意，在这种情况下，设置元素的不透明度不是一个好方法。它还在，只是看不见而已。当元素的不透明度为 0 时，您仍然可以单击该元素。检查您的（未修改的）示例，您可以在单击close按钮之前单击open slider按钮。您应该使用display:none来隐藏它。