Question

我正在使用jQuery v1.8.3和jQuery UI v1.9.2。

在click的{{1}}我想要一个菜单（通过button）隐藏它是否已打开，或显示它是否已关闭，所以我选择使用{{ 3}}函数是ul，click上最基本的形式。很简单，例如

toggle()

（这是coffeescript，但你得到了要点）

实际发生的情况是，当首先显示button.click => autocomplete = input_field.data("ui-autocomplete") menu = autocomplete.menu ul = menu.element ul.toggle()时（不是通过按钮），它具有~~显示属性集~~，显示属性设置为ul。

然后，如果我在点击功能中检查显示属性的当前状态是通过，则首次单击该按钮：

display: block

输出是：

display = none
display = block

因此，由于某种原因，该物业最初被错误地拾取。

~~它将显示属性添加为console.log "display = #{ul.css('display')}" ul.toggle() console.log "display = #{ul.css('display')}"，然后在下一个点击集display: block上添加。~~

我无法直接控制display: none toggle呈现ul，我并不热衷于对此进行捣乱。

这是预期的行为，解决此问题的最佳方法是什么？我正在考虑将函数传递给click，检查是否有显示attr设置，然后显示或隐藏依赖于此，但如果有更简单的方法或更好的功能，可能是更新版本的切换，那么请告诉我。在我看来，jQuery文档是任何技术项目中最糟糕的一些，所以我认为我很可能完全使用了错误的函数。

非常感谢任何帮助。

Answer 1

在页面加载时设置显示属性。像

这样的东西

$(function(){
  $("ul").hide();
});

呈现自动填充后。

这将设置display：none使用.show()使其成为display:block

Answer 2

即使您的元素没有显式设置显示属性，

toggle也应该有效。有关示例，请参阅this jsfiddle。要检查的一件事是你在$(function() { ... });

中进行点击处理

Answer 3

你说你在页面第一次加载时会看到li，如果这是预期的行为那么很棒 - 无论哪种方式都无关紧要。我创建了这个JS小提琴http://jsfiddle.net/r0k3t/Rcpet/去那里尝试一下，无论CSS在第一次加载页面时将display属性设置为block还是none，切换工作正常。如果您发布了更多代码，那么更容易看到您想要完成的内容，但很难从描述中知道问题的位置，您可能会遇到一个简单的语法错误，但我们无法看到。无论如何 - 这是与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 */  
}

Answer 4

检查此代码

<!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切换不能正常工作

4 个答案: