尝试在按钮上添加或删除类[复制]

Question

这个问题在这里已有答案：

• Add and remove a class on click using jQuery? 8个答案

我试图添加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>

Answer 1

您的.box位于按钮顶部，因此永远不会调用该函数。即使你的盒子不透明度为0，它仍然是“那里”，而你正在点击它（注意当鼠标悬停在按钮上时光标不是指针）。

你要么想为你的.box找到一个不同的位置，要么将它的z-index置于低于0.我在下面的代码片段中做了后一个更改。

$(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>

Answer 2

要实现预期的reult，请使用z-index的以下选项，因为输入和按钮是重叠的

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

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

Answer 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>

Answer 4

这是因为您的按钮位于文本输入字段下方。为按钮赋予'position'属性'relative'值，并将其'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>