ボタンをクリックすると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();
})
divをクリックするとテキストボックスを表示し、外側をクリックすると非表示にする必要があると仮定します。
$('.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();
}).search-box {
background-color: #ddd;
height: 20px;
}<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>ありがとう。 私のコードは残念です。これは私がここで尋ねる私の初めてのことです –
質問説明：質問は明らかです。このようなアプローチでは、ユーザーが検索ボックスをクリックしようとすると、そのボックスは非表示になります。ユーザーがそれを防止しようとしています。
私はブートストラップの使用方法を本当に好むでしょう。あなたが隠し要素トリガ、隠し要素をクリックすると説明
$(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>：あなたのHTMLはどんな意味がありませんので、私は自分自身を使用しています明らかにされた目に見えないマスクがあることを示しています。
私はまた同じトピックに関する記事をEvolution of Drop Down Menus and Exiting Themと書いています。それを見て、あなたはこの方法が他のものよりも優れていることを学ぶことができます。
よろしいですか？あなたの説明をありがとう –
@HieuVu詳細については、この記事をご覧ください：https://blog.praveen.science/evolution-of-drop-down-menus-and-exiting-them/ –
あなたはe.stopImmediatePropagation（）を使用することができます。外側の要素とボディ要素上でトリガされるイベントを停止するdivの外側がクリックされた場合に、必要なクラスを削除するremoveClass（）メソッドを呼び出します。このよう
：あなたの例では
$(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>$(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>私はそれを得ました。それをありがとう –
？ –
質問は明らかです。このようなアプローチでは、ユーザーが検索ボックスをクリックしようとすると、そのボックスは非表示になります。ユーザーがそれを防止しようとしています。 –
似たようなもの：https://stackoverflow.com/a/40886598 –