尝试在按钮单击上添加或删除类[重复]答案

【问题标题】：trying to add or remove class on button click [duplicate]尝试在按钮单击上添加或删除类[重复]
【发布时间】：2018-03-06 16:21:08
【问题描述】：

我正在尝试添加 toggleClass 但它不起作用。我还尝试使用 hasClass 添加或删除类。也有同样的问题。

$(document).ready(function() {
  $(".srch-btn").click(function() {
    $(".srch-inpt").toggleClass("expanded");
  });
});

.box {
  width: 300px;
  max-width: 100%;
  position: absolute;
  top: 0;
}

.srch-inpt {
  height: 38px;
  box-sizing: border-box;
  transition: all 0.5s ease;
  color: #fff;
  opacity: 0;
  padding: 10px 38px;
  width: 0;
  background: rgba(166, 166, 166, 0.48);
  border: none;
  border-bottom: 2px solid #ddd;
}

.srch-inpt.expanded {
  width: 100%;
  opacity: 1;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
  <button type="button" class="srch-btn">search</button>
  <div class="box">
    <input type="text" name="s" value="" id="s" class="srch-inpt">
  </div>
</form>

【问题讨论】：

并不是说它不起作用，而是你的div绝对位置阻止了搜索按钮上的点击事件。删除绝对值，它就可以工作了（但可能不像预期的那样）。
问题是.box div。它位于按钮的顶部，因此无法单击该按钮。
浏览器调试器中的断点可以帮助您确定事件是否被触发。

标签： javascript jquery html css

【解决方案1】：

您的 .box 位于按钮顶部，因此该函数永远不会被调用。即使您的框不透明度为 0，它仍然“存在”，并且是您单击的内容（请注意，将鼠标悬停在按钮上时光标不是指针）。

你要么想为你的 .box 找到一个不同的位置，要么将它的 z-index 设置为低于 0。我在下面的 sn-p 中进行了后者的更改。

$(document).ready(function() {
  $(".srch-btn").click(function() {
    $(".srch-inpt").toggleClass("expanded");
  });
});

.box {
  width: 300px;
  max-width: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
}

.srch-inpt {
  height: 38px;
  box-sizing: border-box;
  transition: all 0.5s ease;
  color: #fff;
  opacity: 0;
  padding: 10px 38px;
  width: 0;
  background: rgba(166, 166, 166, 0.48);
  border: none;
  border-bottom: 2px solid #ddd;
}

.srch-inpt.expanded {
  width: 100%;
  opacity: 1;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
  <button type="button" class="srch-btn">search</button>
  <div class="box">
    <input type="text" name="s" value="" id="s" class="srch-inpt">
  </div>
</form>

【讨论】：

【解决方案2】：

要达到预期的效果，请使用下面的 z-index 选项，因为输入和按钮是重叠的

.srch-btn{
  position:relative;
  z-index:9999
}

https://codepen.io/nagasai/pen/EQqYJL

【讨论】：

我不建议将 z-index 设置为 '9999'。实际上，管理不同组件的z-index，以便将来更容易维护。例如，我过去在一个项目中做过几次，当我在未来几年进一步开发它时——我将元素的 z-index 设置为“999”，但事实并非如此按预期工作。

【解决方案3】：

remove position: absolute from .box class.

$(document).ready(function() {
  $(".srch-btn").click(function() {
    $(".srch-inpt").toggleClass("expanded");
  });
});

.box {
  width: 300px;
  max-width: 100%;
  top: 0;
}

.srch-inpt {
  height: 38px;
  box-sizing: border-box;
  transition: all 0.5s ease;
  color: #fff;
  opacity: 0;
  padding: 10px 38px;
  width: 0;
  background: rgba(166, 166, 166, 0.48);
  border: none;
  border-bottom: 2px solid #ddd;
}

.srch-inpt.expanded {
  width: 100%;
  opacity: 1;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
  <button type="button" class="srch-btn">search</button>
  <div class="box">
    <input type="text" name="s" value="" id="s" class="srch-inpt">
  </div>
</form>

【讨论】：

【解决方案4】：

这是因为您的按钮位于文本输入字段下方。为按钮的“位置”属性赋予“相对”的值并将其“z-index”设置为略高于文本字段将使按钮可点击。添加过渡会使动画变得流畅。

$(document).ready(function() {
  $(".srch-btn").click(function() {
    $(".srch-inpt").toggleClass("expanded");
    var widthbtn=$(".srch-inpt").width();
    $("button").css({"margin-left":widthbtn+"px","transition":"all 0.1s ease"});
  });
});

.box {
  width: 300px;
  max-width: 100%;
  position: absolute;
  top: 0;
}

.srch-inpt {
  height: 38px;
  box-sizing: border-box;
  transition: all 0.5s ease;
  color: #fff;
  opacity: 0;
  padding: 10px 38px;
  width: 0;
  background: rgba(166, 166, 166, 0.48);
  border: none;
  border-bottom: 2px solid #ddd;
  cursor: pointer;
}

.srch-inpt.expanded {
  width: initial;
  opacity: 1;
}

button {
  cursor: pointer;
  position: relative;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
  <button type="button" class="srch-btn">search</button>
  <div class="box">
    <input type="text" name="s" value="" id="s" class="srch-inpt">
  </div>
</form>

【讨论】：