Question

解决：愚蠢的错误 - 必须用＆＃34;＃sidebar＆＃34;

替换未定义的元素

我在使用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");
      }
    });

但它也不起作用......

Answer 1

众所周知，.is(":visible")无法正常使用Chrome中的某些元素。也许看一下这个帖子jQuery `.is(":visible")` not working in Chrome

Answer 2

您可以使用.is(":visisble")。

，而不是使用.toggle()进行检查

这应该有效，假设您已在某处定义element。

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

Answer 3

你可以添加/删除一个类并检查它。

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

使用这个类来隐藏/显示display none / block也会更好。

jQuery .is（＆＃34;：visible＆＃34;）not working

3 个答案: