问jQuery .is(":visible")不工作
EN

Stack Overflow用户

提问于 2015-08-27 21:09:52

回答 3查看 7.4K关注 0票数 0

解决:愚蠢的错误-必须将未定义的元素替换为"#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");
      }
    });

但它也不起作用。

google-chrome

compatibility

javascript

jquery

html

回答 3

Stack Overflow用户

发布于 2015-08-27 21:13:45

众所周知，.is(":visible")不能在Chrome中的某些元素上正常工作。也许你可以看看这个线程jQuery .is(":visible") not working in Chrome

票数 3

Stack Overflow用户

发布于 2015-08-27 21:18:15

您可以直接使用.toggle()，而不是使用.is(":visisble")进行检查。

假设您已经在某个地方定义了element，那么这应该是可行的。

$("#sidebar_toggle").click(function(){
    $(element).toggle();
});

票数 2

Stack Overflow用户

发布于 2015-08-27 22:52:36

您可以添加/删除类，也可以对其进行检查。

$("#sidebar_toggle").click(function(){
      if ($(element).hasClass("visible")){
        $("#sidebar").hide();
        $(element).removeClass('visible');
      } else {
        $("#sidebar").show();
        $(element).addClass('visible');
      }
    });