css 在单击主体上切换类

cwtwac6a 于 2022-12-27 发布在其他

关注(0)|答案(6)|浏览(171)

我知道很多类似的问题也在Stackoverflow中。这里有一点Jquery的问题。我添加了切换类Jquery函数，当点击正文的任何地方时，应该会删除同一个类。它现在可以工作了，但是当我们点击输入文本字段时，我不需要切换该类。
代码：

var removeClass = true;
$(".btn-search").click(function() {
  $(".input-search").toggleClass('expanded');
  removeClass = false;
});
$("html").click(function() {
  if (removeClass) {
    $(".input-search").removeClass('expanded');
  }
  removeClass = true;
});

body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

JS小提琴：https://jsfiddle.net/vishnuprasadps/3a84p6h0/

css

来源：https://stackoverflow.com/questions/47697192/toggle-class-on-click-body

6条答案

按热度按时间

jtjikinw1#

要解决这个问题，你可以检查是哪个元素引发了使DOM冒泡的click事件，如果它不在.col-search中，你可以切换这个类。
还要注意，此逻辑使removeClass变量成为冗余变量。

$(".btn-search").click(function(e) {
  e.stopPropagation();
  $(".input-search").toggleClass('expanded');
});

$("html").click(function(e) {
  if ($(e.target).closest('.col-search').length == 0)
    $(".input-search").removeClass('expanded');
});

body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

赞(0）回复(0）举报 2022-12-27

nzrxty8p2#

确保使用event.target检查事件不是由要排除的输入触发的
这也不会干扰可能绑定到输入本身的其他事件。

var removeClass = true;
$(".btn-search").click(function() {
  $(".input-search").toggleClass('expanded');
  removeClass = false;
});
$("html").click(function() {
  var searchInput = $(".input-search");
  if (removeClass && event.target != searchInput[0]) {
    searchInput.removeClass('expanded');
  }
  removeClass = true;
});

body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

赞(0）回复(0）举报 2022-12-27

7d7tgy0s3#

只需在输入上使用返回值https://jsfiddle.net/fcdo7kyh/的事件更改JS

var removeClass = true;
$(".btn-search").click(function() {
  $(".input-search").toggleClass('expanded');
  removeClass = false;
});
$(".input-search").click(function() {
  return false;
});

$("html").click(function() {
  if (removeClass) {
    $(".input-search").removeClass('expanded');
  }
  removeClass = true;
});

赞(0）回复(0）举报 2022-12-27

insrf1ej4#

请检查以下代码：
超文本：

<input class="input-search" type="search" placeholder="Search" id="inputSearch" />

联森：

$("#inputSearch").click(function(e) {
    e.stopPropagation();
});

一个一个二个一个一个一个三个一个一个一个一个一个四个一个
这就是你所期望的吗？

赞(0）回复(0）举报 2022-12-27

p4tfgftt5#

$(function() {
  $(".navbar-toggler").on("click", function(e) {
    $("body").toggleClass("openMenu");
    e.stopPropagation()
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button
  class="navbar-toggler"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#navbarSupportedContent"
  aria-controls="navbarSupportedContent"
  aria-expanded="false" 
  aria-label="Toggle navigation"
>
  <div class="bar1"></div>
  <div class="bar3"></div>
</button>

赞(0）回复(0）举报 2022-12-27

ldioqlga6#

甜美而简单

$(".btn-search").click(function(event) {
	event.stopPropagation();
  $(".input-search").toggleClass('expanded');
});
$("html").click(function() { 
    $(".input-search").removeClass('expanded'); 
});
$(".input-search").click(function(event) {
	event.stopPropagation();
  $(".input-search").addClass('expanded');
 
});

body {
  background: #eee;
}

.col-search {
  padding: 13px 8px 8px 0;
  position: relative;
  width: 80%;
}

.input-search {
  width: 220px;
  height: 34px;
  max-width: 0;
  padding: 5px 10px;
  transition: all .2s ease;
  position: absolute;
  top: 13px;
  bottom: 13px;
  right: 46px;
  border: 0;
  box-sizing: border-box;
  opacity: 0;
}

.input-search.expanded {
  max-width: 220px;
  opacity: 1;
  z-index: 10;
}

.btn-search {
  position: absolute;
  right: 0;
  width: 38px;
  height: 34px;
  border: 0;
  background: #333;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="col-search">
  <input class="input-search" type="search" placeholder="Search" />
  <input type="button" class="btn-search" value="click">
</div>

赞(0）回复(0）举报 2022-12-27

我来回答

css 在单击主体上切换类

6条答案

相关问题

热门标签

最新问答