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 => {&nbsp; $("#slider").css("opacity","0");&nbsp; e.preventDefault();});示例小提琴。请注意，在这种情况下，设置元素的不透明度不是一个好方法。它还在，只是看不见而已。当元素的不透明度为 0 时，您仍然可以单击该元素。检查您的（未修改的）示例，您可以在单击close按钮之前单击open slider按钮。您应该使用display:none来隐藏它。