时间戳

首页 > 解决方案 > 如何让我的按钮在 jquery 中多次工作？

html - 如何让我的按钮在 jquery 中多次工作？

问题描述

我试图让只有一个 div 可见，而其他 div 只是变黑，到目前为止，我已经尝试使用 addClass 和 removeClass 但它没有用，用 jquery 更改 css 似乎有效，但只有一次，我可以单击按钮打开和关闭一次，他们会完成这项工作，然后就变得无用了，有什么解决办法吗？

HTML

<div class="tamsus"></div> 

<button class = "on">On</button>
<button class = "off">Off</button>

jQuery

    $(".on").click(function(){
      $(".tamsus").css({ "background-color": "black", "position": "absolute", "color": "#fff", "height": "100vh", "width": "100%", "z-index": "88", "opacity": "0.8"});
  });

     $(".off").click(function(){
      $(".tamsus").css({"display": "none"})
     });
    });

标签： htmljquerycss

解决方案

你有两个问题：

  1. 添加后您不会删除display: none。
  2. 由于非常高z-index，覆盖层位于按钮的顶部，因此一旦显示，您就无法单击按钮，因为它们位于其后面。

const $tamsus = $(".tamsus")
$(".on").click(function() {
  $tamsus.removeClass('hidden');
});
$(".off").click(function() {
  $tamsus.addClass('hidden');
});
button {
  position: relative;
  z-index: 99;
}

.tamsus {
  position: absolute;
  z-index: 88;
  height: 100vh;
  width: 100%;
  opacity: 0.8;
  background-color: black;
  color: #fff;
}

.hidden {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tamsus hidden"></div>
<button class="on">On</button>
<button class="off">Off</button>

推荐阅读