0

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

在 aclick上，button我希望菜单（通过 a ul）在打开时隐藏，或者在关闭时显示，所以我选择以最基本的形式使用切换click功能， on ，toggle()。就这么简单，例如

button.click =>
  autocomplete = input_field.data("ui-autocomplete")
  menu = autocomplete.menu
  ul = menu.element
  ul.toggle()

（这是咖啡脚本，但你明白了要点）

实际发生的是，当第ul一次显示（而不是通过按钮）时，它的display 属性设置为 display 属性display: block。

然后，如果我在单击功能中检查显示属性的当前状态，则在第一次单击按钮时：

console.log "display = #{ul.css('display')}"
ul.toggle()
console.log "display = #{ul.css('display')}"

输出是：

显示 = 无
显示 = 块

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

它将显示属性添加为display: block，然后在下一次单击时设置display: none。

我无法直接控制它，因为它是由自动完成小部件ul呈现的，我并不热衷于摆弄它。

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

任何帮助深表感谢。

4

4 回答 4

0

你是说你在页面第一次加载时看到了 li ，如果这是预期的行为，那就太好了 - 无论哪种方式都无关紧要。我创建了这个 JS fiddle http://jsfiddle.net/r0k3t/Rcpet/去那里尝试一下，当您第一次加载页面时，CSS 是否将显示属性设置为阻止或无，切换工作正常。如果您发布了更多代码，则更容易看到您想要完成的任务，但仅从您的描述中很难知道问题出在哪里，您可能会遇到简单的语法错误，但我们看不到。无论如何 - 这是与 JS fiddle 相同的代码。

<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 */  
}
于 2012-12-24T13:40:28.357 回答
0

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

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

一旦呈现自动完成。

这将设置 display:none 使用.show()它display:block

于 2012-12-24T13:18:06.440 回答
0

toggle即使您的元素没有显式设置显示属性，也应该可以工作。有关示例，请参见此 jsfiddle。要检查的一件事是您正在执行点击处理程序$(function() { ... });

于 2012-12-24T13:18:43.697 回答
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>
于 2012-12-24T14:00:19.890 回答