如果最初未設置顯示屬性，則jQuery切換無法正常工作
[英]jQuery toggle doesn't work properly if no display property set initially
問題描述
我正在使用jQuery v1.8.3和jQuery UI v1.9.2。
click button我希望菜單（通過ul ）隱藏（如果已打開），或者顯示是否已關閉，因此我選擇了以最基本的形式使用切換功能toggle() click ， toggle() 。 就這么簡單，例如
button.click =>
autocomplete = input_field.data("ui-autocomplete")
menu = autocomplete.menu
ul = menu.element
ul.toggle()
（這是咖啡腳本，但要點）
實際發生的情況是，當首先顯示ul （而不是通過按鈕）時，它已將
display屬性設置
為display屬性，將display屬性設置為display: block 。
然后，在第一次單擊按鈕時，如果我通過click函數檢查display屬性的當前狀態是什么，請執行以下操作：
console.log "display = #{ul.css('display')}"
ul.toggle()
console.log "display = #{ul.css('display')}"
輸出為：
顯示=無
顯示=塊
因此，由於某種原因，最初會錯誤地拾取該屬性。
它將顯示屬性添加為
display: block ，然后在下一個單擊集上
display: none 。
我不直接控制ul ，因為它是由自動完成小部件呈現的，我也不熱衷於擺弄它。
這是預期的行為嗎，解決此問題的最佳方法是什么？ 我正在考慮傳遞一個函數來click ，以檢查是否設置了顯示屬性，然后顯示或隱藏依賴該屬性，但是如果有更簡便的方法或更好的功能，也許是更新版本的toggle，請告訴我。 在我看來，jQuery文檔是所有技術項目中最糟糕的一個，因此我認為我完全有可能使用了錯誤的功能。
任何幫助深表感謝。
4 個解決方案
解決方案1
0 2012-12-24 13:18:06
設置頁面加載時的顯示屬性。 就像是
$(function(){
$("ul").hide();
});
呈現自動完成功能后。
這將設置display：none，不使用.show()使其display:block
解決方案2
0 2012-12-24 13:18:43
即使您的元素沒有顯式設置display屬性， toggle應該起作用。 有關示例，請參見此jsfiddle 。 要檢查的一件事是您正在$(function() { ... });執行單擊處理程序$(function() { ... });
解決方案3
0 2012-12-24 13:40:28
您是說頁面首次加載時會看到li，如果這是預期的行為，那就太好了-無論哪種方式都沒有關系。 我創建了這個JS小提琴http://jsfiddle.net/r0k3t/Rcpet/嘗試一下，無論CSS是在您首次加載頁面時將display屬性設置為block還是不設置，切換都可以正常工作。 如果您發布了更多的代碼，將更容易看到要完成的任務，但是很難僅從描述中知道問題出在哪里，您可能會遇到一個簡單的語法錯誤，但是我們看不到。 無論如何-這是JS小提琴上的相同代碼。
<a href="#" id="toggleButton">Toggle li element</a>
<ul>
<li>You can see me now</li>
</ul>
//Here is the JS wired up in document load
function toggleLi() {
$("ul li").toggle();
}
$("#toggleButton").click(toggleLi);
/* Here is the CSS */
ul li {
display: block; /*change to none and test - works as well */
}
解決方案4
0
檢查此代碼
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("ul").toggle();
});
});
</script>
<style>
ul {display:none;}
</style>
</head>
<body>
<button id="show">Show</button>
<ul>
<li>aaaa </li>
<li>bbbb </li>
<li>ccccccc </li>
</ul>
</body>
</html>
jQuery切換設置顯示為與初始設置不同的值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.