Javascript 单击外部元素时如何切换函数

单击按钮时，我将类名设置为div标记。我想在单击“外部”时删除此类。我该怎么办？我尝试过一些方法，但不起作用，以下是我的尝试：

HTML

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

---

问题说明：问题清楚。使用这种方法，当用户试图单击搜索框时，它会将其隐藏。用户正试图阻止它

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

$（函数（）{
$（“.search box”）。单击（函数（）{
$（“正文”）.addClass（“搜索打开”）；
});
$（“.search mask”）。单击（函数（）{
$（“body”）.removeClass（“搜索打开”）；
});
});
。搜索框{
填充物：5px；
位置：相对位置；
背景：#共因失效；
宽度：175px；
高度：25px；
光标：指针；
}
.搜索掩码{
显示：无；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
z指数：2；
}
.搜索框输入{
位置：绝对位置；
z指数：3；
显示：无；
}
.搜索打开的输入，
.搜索打开.搜索掩码{
显示：块；
}
假设您需要在单击div时显示文本框，并在单击外部时将其隐藏


$（“.search box”）。单击（函数（e）{
$（“#搜索输入”）.toggle（）；
e、 停止传播（）；
})
$（“#搜索输入”）。单击（函数（e）{
e、 停止传播（）；
})
$（文档）。单击（函数（e）{
$（“#搜索输入”）.hide（）；
e、 停止传播（）；
})
。搜索框{
背景色：#ddd；
高度：20px；
}
您可以使用e.stopImmediatePropagation（）；若要停止在外部元素和主体元素上触发的事件，请调用removeClass（）方法，以便在单击div外部时删除所需的类

像这样：


$（函数（）{
$（“.inner div”）。单击（函数（e）{
e、 停止即时复制（）；
$（“.inner div”）.addClass（“我的类”）；
});
$（“正文”）。单击（功能（e）{
e、 停止即时复制（）；
$（“.inner div”）.removeClass（“我的类”）；
});
})
.outer div{
背景：#f00；
宽度：100%；
高度：500px；
}
.内分区{
背景：#ccc；
宽度：200px；
高度：140像素；
}
.我的班级{
背景：#00f；
}

外分区
内分区
你们想要实现什么？问题很清楚。使用这种方法，当用户试图单击搜索框时，它会将其隐藏。用户正在试图阻止它。类似的：非常感谢。对不起，我的代码。这是我第一次来这里，我知道了。谢谢你的帮助that@HieuVu您还可以查看本文以了解更多信息：
$('.search-box').click(function() {
    $('#search-input').toggle();
})
$("body").not('.search-box').click(function() {
    $('#search-input').hide();
})