Question

我无法删除'open'类并关闭wordpress网站上的弹出窗口。我在jQuery中添加/删除类没有问题。 WordPress对我来说是新的。

选择器'search-close'是正确的，并且在我将.removeClass()更改为jQuery .css("background", "red")时作出了响应。仅.removeClass()不起作用或从所选元素中删除类'open'。

<div class = "search-button">
   <div id="fullscr">
      <div class="close-button">X</div>
        <form role="search" method="get" class="search-form" action="<?php echo...
        </form>
      </div>
   </div>
</div>

SCSS：

#fullscr.open {

    opacity: 1;
}
#fullscr {
z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;

    opacity: 0;
}
div.close-button{
display:block;
    position: fixed;
    top: 15px;
    right: 15px;
    background:green;
    &:hover {
        opacity:0.6;
    }
}

jQuery：

$('search-button').on('click', function(){

     $('#fullscr').addClass('open');

});
$('.close-button').on('click', function(){
     $('#fullscr').removeClass(); or .removeClass('open');
// $(this).css("background","blue"); is working but why removeClass has no action ??

});

.close-button onclick应该使用搜索表单删除弹出的全窗口。如何运作？

Answer 1

您的代码应显示为$('#fullscr').removeClass('open');，但假设您正确编写了该代码，则仍然会遇到问题。您拥有.search-button的onclick处理程序，该处理程序在单击时添加了“ open”类。 .close-button是'.search-button'的后代，因此事件冒泡可能意味着每次您单击关闭按钮时，都会删除并立即添加open类，因为.search-button的onclick处理程序是也正在执行。

我建议移动弹出窗口，使其不成为搜索按钮的后代，但是您可以仅将e.stopPropagation()添加到关闭按钮事件处理程序中，以阻止事件冒泡的发生，如本示例中使用您的代码所示

$('.search-button').on('click', function() {
  $('#fullscr').addClass('open');
});

$('.close-button').on('click', function(e) {
  e.stopPropagation();
  $('#fullscr').removeClass('open');
});

#fullscr.open {
  opacity: 1;
}

#fullscr {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
}

div.close-button {
  display: block;
  position: fixed;
  top: 15px;
  right: 15px;
  background: green;
  &:hover {
    opacity: 0.6;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-button">
  Search
  <div id="fullscr">
    <div class="close-button">X</div>
    <form role="search" method="get" class="search-form">
      <input name="keywords" />
    </form>
  </div>
</div>

removeClass（）不会删除wordpress元素上的类

1 个答案: