Question

单击按钮时，我将类名设置为div标签。我想在外面点击时删除这个类。我该怎么办？我尝试了一些方法，但它不起作用，这是我的尝试：

HTML

<div class="search-box"></div>
<input type="search" name="search" placeholder="search in here" id="search-input" autofocus="autofocus" style="display: none; ">

的jQuery

$('.search-box').click(function() {
    $('#search-input').toggle();
})
$("body").not('.search-box').click(function() {
    $('#search-input').hide();
})

Answer 1

假设您需要在点击div时显示文本框，并希望在点击外部时隐藏它。

＆＃13;

$('.search-box').click(function(e) {
  $('#search-input').toggle();
  e.stopPropagation();
})
$('#search-input').click(function(e) { 
  e.stopPropagation();
})
$(document).click(function(e) {

  $('#search-input').hide();
  e.stopPropagation();
})

＆＃13;

.search-box {
  background-color: #ddd;
  height: 20px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="search-box">

  <input type="search" name="search" placeholder="search in here" id="search-input" autofocus="autofocus" style="display: none; ">
</div>

＆＃13;

Answer 2

问题解释：问题很清楚。使用这种方法，当用户尝试单击搜索框时，它将隐藏它。用户正试图阻止它。

我更喜欢Bootstrap使用的方式。您的HTML没有任何意义，所以我使用自己的HTML：

$(function () {
  $(".search-box").click(function () {
    $("body").addClass("search-open");
  });
  $(".search-mask").click(function () {
    $("body").removeClass("search-open");
  });
});

.search-box {
  padding: 5px;
  position: relative;
  background: #ccf;
  width: 175px;
  height: 25px;
  cursor: pointer;
}
.search-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.search-box input {
  position: absolute;
  z-index: 3;
  display: none;
}
.search-open input,
.search-open .search-mask {
  display: block;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="search-mask"></div>
<div class="search-box">
  <input type="text" />
</div>

<强>解释

当您点击隐藏的元素触发器时，隐藏的元素将被显示，并且下面会显示一个隐形的掩码。
隐形面具独立于隐藏元素（搜索文本）。
因此，当您对搜索文本执行任何操作时，它的行为正常。通过使输入框隐藏，点击不会传输到蒙版。
在搜索文本的下方，隐藏的面具展开。
点击搜索文字外的任何地方，点击遮罩，删除不可见的遮罩和文本框。

我还在这里写了一篇关于同一主题的文章：Evolution of Drop Down Menus and Exiting Them。看看它，你将能够了解这种方法比其他方法更好。

Answer 3

您可以使用e.stopImmediatePropagation（）;要停止在外部元素和body元素上触发事件，请调用removeClass（）方法，以便在单击div外部时删除所需的类。

像这样：

$(function(){

$(".inner-div").click(function(e){
   e.stopImmediatePropagation();
   $(".inner-div").addClass("my-class");
});
$("body").click(function(e){
   e.stopImmediatePropagation();
   $(".inner-div").removeClass("my-class");
});
})

.outer-div{
background :#f00;
width:100%;
height:500px;
}
.inner-div {
 background : #ccc;
 width :200px;
 height:140px;
}
.my-class{
background :#00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="outer-div">
outer div
<div class="inner-div">
inner div

</div>
</div>

在你的例子中不要调用toggle（），否则它会在第二次点击时隐藏文本框，而只是调用show（）。

$(function(){
$('.search-box').click(function(e) {
    e.stopImmediatePropagation();
    $('#search-input').show();
});
$("body").click(function() {
    $('#search-input').hide();
})
});

.search-box {
  background-color: #ddd;
  height: 20px;
}
.outer-div{
 width:100%;
 height:400px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="outer-div">
<div class="search-box">

  <input type="search" name="search" placeholder="search in here" id="search-input" autofocus="autofocus" style="display: none; ">
</div>
</div>

单击外部元素时如何切换功能

3 个答案: