jQuery .is(":visible")不工作
jQuery .is(":visible")不工作
提问于 2015-08-28 05:09:52
解决:愚蠢的错误-必须将未定义的元素替换为"#sidebar“
我在使用is visible jquery函数时遇到了问题。这是我的jQuery代码。
$("#sidebar_toggle").click(function(){
if ($(element).is(":visible")){
$("#sidebar").hide();
} else {
$("#sidebar").show();
}
});这是我的侧边栏的html：
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse sidebar">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><a href="/user/<%=current_user.id%>"><img src=<%=Gravatar.new(current_user.email).image_url%> class="img-circle" width="60"></p>
<h5 class="centered"><%=current_user.username%></h5></a>
<hr>
<!-- <li>
<a class="active" href="/inbox">
<i class="fa fa-inbox"></i>
<span>Inbox</span>
</a>
</li>
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
-->
<%if Company.where(:user_id => current_user.id).count<3 || current_user.premium%>
<li>
<a href="/companies/new">
<i class="fa fa-star"></i>
<span>Start a Startup</span>
</a>
</li>
<%end%>
<%if Company.where(:user_id => current_user.id).count>=1%>
<li>
<a href="/companies">
<i class="fa fa-building"></i>
<span>Companies</span>
</a>
</li>
<%end%>
<li>
<a href="/market">
<i class="fa fa-exchange"></i>
<span>Global Market</span>
</a>
</li>
<li>
<a href="/investments">
<i class="fa fa-line-chart"></i>
<span>Invest</span>
</a>
</li>
<li>
<a href="/users-companies">
<i class="fa fa-search"></i>
<span>Users & Companies</span>
</a>
</li>
<li>
<a href="/request-help">
<i class="fa fa-question"></i>
<span>Request & Help</span>
</a>
</li>
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->当我添加if ($(element).is(":visible")){...时，单击sidebar_toggle时它会停止工作。即使我在这段代码之前添加了$("#sidebar").hide();，它也不能工作。
奇怪的是，它可以在jsfiddle上运行，但不能在chrome上运行，因为我正试图用我所有的网站代码来测试它。
我也尝试过这样做：
$("#sidebar_toggle").click(function(){
if ($(element).hasClass( "hidden" )){
$("#sidebar").show();
$("#sidebar").removeClass("hidden");
} else {
$("#sidebar").hide();
$("#sidebar").addClass("hidden");
}
});但它也不起作用。
回答 3
Stack Overflow用户
发布于 2015-08-28 05:13:45
众所周知，.is(":visible")不能在Chrome中的某些元素上正常工作。也许你可以看看这个线程jQuery .is(":visible") not working in Chrome
Stack Overflow用户
发布于 2015-08-28 05:18:15
您可以直接使用.toggle()，而不是使用.is(":visisble")进行检查。
假设您已经在某个地方定义了element，那么这应该是可行的。
$("#sidebar_toggle").click(function(){
$(element).toggle();
});Stack Overflow用户
发布于 2015-08-28 06:52:36
您可以添加/删除类，也可以对其进行检查。
$("#sidebar_toggle").click(function(){
if ($(element).hasClass("visible")){
$("#sidebar").hide();
$(element).removeClass('visible');
} else {
$("#sidebar").show();
$(element).addClass('visible');
}
});如果只使用类来进行隐藏/显示，使用display none/block也会更好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32259489
复制相关文章
相似问题
腾讯云开发者
