Fatal编程技术网
  • javascript/
  • Javascript jQuery切换不'；如果最初未设置显示属性，则无法正常工作

Javascript jQuery切换不'；如果最初未设置显示属性，则无法正常工作

javascript jquery coffeescript

Javascript jQuery切换不'；如果最初未设置显示属性，则无法正常工作,javascript,jquery,coffeescript,Javascript,Jquery,Coffeescript,我正在使用jQueryV1.8.3和jQueryUIV1.9.2 在按钮的上单击我希望菜单（通过ul）隐藏它是否打开，或显示它是否关闭，因此我选择以最基本的形式使用该函数，在上单击，切换（）。就这么简单 button.click => autocomplete = input_field.data("ui-autocomplete") menu = autocomplete.menu ul = menu.element ul.toggle() （这是咖啡脚本，但你知道要点

我正在使用jQueryV1.8.3和jQueryUIV1.9.2

在
按钮的
上单击
我希望菜单（通过
ul
）隐藏它是否打开，或显示它是否关闭，因此我选择以最基本的形式使用该函数，在
上单击
，
切换（）
。就这么简单


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


（这是咖啡脚本，但你知道要点）

实际情况是，当最初显示
ul
时（不是通过按钮），它将显示属性设置为
display:block

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


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


输出为：

显示=无

显示=块

因此，由于某些原因，最初错误地拾取了该属性

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

我不能直接控制ul，因为它是由提供的，我也不想去摆弄它

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

非常感谢您的帮助。
在页面加载时设置“显示”属性。差不多


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


渲染自动完成后


这将设置display:none使用
.show（）
使其显示：block
切换应起作用，即使您的元素没有明确设置显示属性。有关示例，请参见。需要检查的一件事是，您正在执行
$（function（）{…}）中的单击处理程序
您的意思是，当页面第一次加载时，您看到了li，如果这是预期的行为，那么就很好了——这两种方式都不重要。我创建了这个JS提琴，不管CSS在你第一次加载页面时是否将display属性设置为block或none，切换都可以正常工作。如果您发布了更多的代码，那么就更容易看到您想要完成的任务，但是很难仅仅从您的描述中知道问题在哪里，您可能会有一个简单的语法错误，但我们看不到。无论如何，这里的代码与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 */  
}





    

  • 你现在可以看见我了
    • 


//这里是连接在文档加载中的JS
函数toggleLi（）{
$（“ul li”）.toggle（）；
}
$（“#切换按钮”）。单击（切换按钮）；
/*这是CSS*/
ulli{
显示：block；/*更改为none并测试-也可以工作*/
}

检查此代码


<!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>




$（文档）.ready（函数（）{
$（“#显示”）。单击（函数（）{
$（“ul”）.toggle（）；
});
});
ul{显示：无；}
显示

    

  • aaaa
    • 

  • bbbb
    • 

  • CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
    • 



我已经更新了我的问题，因为我发现了新信息，我可能对display属性的初始状态不正确（虽然我现在不能确定，但可能是！：S）。我也无法设置页面加载时的显示，因为菜单是通过autocomplete小部件构建的，该小部件将其设置为
display:none
。我已经更新了我的问题，因为我发现了新信息，我可能对display属性的初始状态不正确（虽然我现在不能确定，但可能是！：S）。点击处理程序肯定包含在jQuery函数上下文中。没有语法错误，因为我正在使用coffeescript编译它，它会为我检查语法。最初没有
li
，因为它是一个自动完成小部件，但是有一个显示设置为无的
ul
。当菜单出现时，display设置为block。我已经更新了js fiddle，可以切换jqueryui自动完成创建的ul。我肯定错过了一些东西，也许会有所帮助。这是开源的，叫做黑客攻击。事实上，我添加了一个按钮，可以打开包含所有可能选项的下拉菜单。有一些实现要么不起作用，要么不按我的意愿去做。