尝试在按钮单击时添加或删除类

Question

我正在尝试添加toggleClass，但它无法正常工作。我还尝试使用hasClass添加或删除类。也存在同样的问题。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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

Answer 2

你的.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 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

这是因为您的按钮位于文本输入字段下方。给按钮一个“相对”的值。到了＆＃39;位置＆＃39;财产和设置其＆＃39; z-index＆＃39;略高于文本字段将使按钮可单击。添加转换会使动画变得流畅。

＆＃13;

＆＃13;

$(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"});
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;