Jquery 隱藏和顯示按鈕
[英]Jquery hide and show a button
問題描述
首先，我現在已經廣泛閱讀了關於如何在正確檢測到 div 之外的點擊或事件后隱藏 div 的反復出現的問題； 這確實影響了我的 javascript 代碼。 但是我是新手，它不起作用所以我希望你能幫助我。
其次，jfiddle - https://jsfiddle.net/u5uzexqk/ ...請注意，當點擊搜索欄或按鈕的任何部分時，按鈕應該顯示； 並且在檢測到外部任何地方的點擊時不顯示。
在代碼之前，我想指出我也已經閱讀了電子傳播的東西，但是我認為這不是問題所在； 如果是，我深表歉意。
也許由於我是 Javascript 的新手，我看不出另一個問題的建議答案有什么幫助； 最流行的答案中的 Jfiddle 似乎正好相反 - 再次單擊菜單鏈接時刪除菜單。
html
<body>
<div id = "wrapper">
<form action="" class="search-form">
<div class="cell">
<input type="text" name="q">
</div>
<div class="cell button-holder">
<button type="submit" id="dropdownbutton">
<span>Search</span>
</button>
</div>
</form>
</div>
</body>
Javascript
$("#wrapper").onclick(function (e){
document.getElementById('#dropdownbutton').style.visibility = 'visible';
}
$(document).mouseup(function (e)
{
var container = $("#wrapper");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#dropdownbutton").hide();
}
});
});
3 個解決方案
解決方案1
2 2017-02-07 21:28:44
您正在混合隱藏和顯示的方法。 如果你要使用.hide（） ，然后使用.show（）顯示它的時候。
使用您的代碼，對.hide()的調用會將樣式設置為display: none ，然后是您的原生Javascript 技術來顯示按鈕（其中還包含 id 中的磅符號，即document.getElementById('#dropdownbutton') - 在調用document.getElementById()時不要將它與 jQuery 的選擇器混淆）只是添加一個visibility: visible樣式visibility: visible 。 這些是不同的屬性。
<button type="submit" id="dropdownbutton" style="display: none; visibility: visible;">
<span>Search</span>
</button>
此外，正如評論中指出的那樣，沒有 jQuery 方法.onclick 。 使用.click() 。 此外，在包裝器按鈕的單擊處理程序之后缺少右括號。 所以像這樣更新它：
$("#wrapper").click(function(e) {
$("#dropdownbutton").show();
}); // <- add parenthesis (and optional semi-colon) to terminate the function call
並且已經提到，您應該等到 DOM 准備好訪問元素。 使用 jQuery，使用document.ready() 。
$(document).ready(function(readyEvent) {
//interact with DOM
//now that the DOM is ready
//e.g. fetch elements by id attribute, add event handlers, etc.
});
在下面的代碼片段中查看這些變化：
$(document).ready(function() { $("#wrapper").click(function(e) { //document.getElementById('dropdownbutton').style.visibility = 'visible'; $("#dropdownbutton").show(); }); $(document).mouseup(function(e) { var container = $("#wrapper"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { $("#dropdownbutton").hide(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <form action="" class="search-form"> <div class="cell"> <input type="text" name="q"> </div> <div class="cell button-holder"> <button type="submit" id="dropdownbutton"> <span>Search</span> </button> </div> </form> </div>
解決方案2
1 2017-02-07 21:40:53
首先讓我們指出代碼中的一些問題：
- jQuery 中沒有
onclick類的功能。 要附加點擊事件，您可以使用：$(...).click(callback)或$(...).on("click", callback)。 -
show的對立面不是visibility = "visible"。show使用display屬性（show=display = "none"），它的反義詞是hide（display = ""）。 所以使用show和hide。 - 既然您已經在使用 jQuery，為什么要使用
document.getElementById，只需$("#id")就可以了。 - 而不是所有這些檢查以查看目標是包裝器還是包裝器內部的東西，只需停止事件在包裝器的事件偵聽器內的傳播，使其永遠不會到達文檔。
- 您應該將代碼包裝在加載事件中 -
$()將執行 - 以確保在開始執行任何操作之前已加載所有內容。
$(function() { $("#wrapper").click(function(e) { $("#dropdownbutton").show(); e.stopPropagation(); // if the event occur inside the wrraper, prevent it from bubbling up to the document and fires the bellow function }); $(document).click(function(e) { // if the click target is the #wrapper (or something inside it) this event will never reach the document because of the stop propagation inside the above listener. So if this is fired then the target is not the wrapper, therefore we should hide the button $("#dropdownbutton").hide(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="wrapper"> <form action="" class="search-form"> <div class="cell"> <input type="text" name="q"> </div> <div class="cell button-holder"> <button type="submit" id="dropdownbutton"> <span>Search</span> </button> </div> </form> </div> </body>
解決方案3
0 2017-02-07 22:21:44
我會這樣做：
$("document").ready(function(){
$("#dropdownbutton").hide();
$( "input[name=q]" ).on( "focus blur", function() {
if($(this).is( ":focus" ) ){
$("#dropdownbutton").show();
}else{
$("#dropdownbutton").hide();
}
});
});
JQuery按鈕顯示和按鈕隱藏
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.