Question

我想隐藏所有没有.active类的元素。我目前正在使用的代码似乎无法正常工作。

HTML

<ul class="list">
        <li><a href="#">Menu Item 1</a>
          <ul>
            <li><a href="#">Menu Item 1.1</a></li>
            <li><a href="#">Menu Item 1.2</a></li>
            <li><a href="#">Menu Item 1.3</a></li>
          </ul>
        </li>
        <li class="active"><a href="#" class="active">Menu Item 2
          </a>
          <ul>
            <li><a href="#">Menu Item 2.1</a></li>
            <li><a href="#" class="active">Menu Item 2.2
              </a>
              <ul>
                <li><a href="#">Menu Item 2.2.1</a></li>
                <li><a href="#">Menu Item 2.2.2</a></li>
                <li><a href="#" class="active">Menu Item 2.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Menu Item 2.3</a></li>
        </ul>
      </li>
        <li><a href="#">Menu Item 3</a></li>
        <li><a href="#">Menu Item 4</a></li>
    </ul>

CSS

.list li { display: none; }

的jQuery

$( document ).ready( function( ) {

    $(".menu > li").has(".active").show;

});

Answer 1

.show是一个函数，它应该是.show()，并且标记中没有包含类.menu的元素，而是使用.list（.list > li）

＆＃13;

$(document).ready(function() {
  $(".list > li").has(".active").show();
});

＆＃13;

.list li {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="#">Menu Item 1</a>
    <ul>
      <li><a href="#">Menu Item 1.1</a>
      </li>
      <li><a href="#">Menu Item 1.2</a>
      </li>
      <li><a href="#">Menu Item 1.3</a>
      </li>
    </ul>
  </li>
  <li class="active"><a href="#" class="active">Menu Item 2
    	  </a>
    <ul>
      <li><a href="#">Menu Item 2.1</a>
      </li>
      <li><a href="#" class="active">Menu Item 2.2
    	      </a>

        <ul>
          <li><a href="#">Menu Item 2.2.1</a>
          </li>
          <li><a href="#">Menu Item 2.2.2</a>
          </li>
          <li><a href="#" class="active">Menu Item 2.2.3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Menu Item 2.3</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu Item 3</a>
  </li>
  <li><a href="#">Menu Item 4</a>
  </li>
</ul>

＆＃13;

Answer 2

你有一些拼写错误：

您没有使用.list，而是使用了.menu
您没有使用.show()，而是使用了.show

接下来我认为你可以让你的jQuery更简单：

$(function() {
  $(".list > li.active").show();
});

$(function() { ... })与$(document).ready(function() { ... }完全相同，我直接选择了li个元素.active，而不是先选择li }元素，然后检查他们是否有类.active。

如果您想要显示整个菜单结构（例如菜单2 ，菜单2.2 ，菜单2.2.3 ，您需要更改.list > li.active进入.list li.active。但这也意味着将.active课程移至li而不是子菜单的a标签。

另一个选择是使用CSS而不是jQuery（尽管你可能会使用jQuery进行行为）。只需使用.list li.active { display: list-item; }即可显示菜单2

$(function() {
  $(".list > li.active").show();
});

.list li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="#">Menu Item 1</a>
    <ul>
      <li><a href="#">Menu Item 1.1</a>
      </li>
      <li><a href="#">Menu Item 1.2</a>
      </li>
      <li><a href="#">Menu Item 1.3</a>
      </li>
    </ul>
  </li>
  <li class="active"><a href="#" class="active">Menu Item 2
          </a>
    <ul>
      <li><a href="#">Menu Item 2.1</a>
      </li>
      <li><a href="#" class="active">Menu Item 2.2
              </a>
        <ul>
          <li><a href="#">Menu Item 2.2.1</a>
          </li>
          <li><a href="#">Menu Item 2.2.2</a>
          </li>
          <li><a href="#" class="active">Menu Item 2.2.3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Menu Item 2.3</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Menu Item 3</a>
  </li>
  <li><a href="#">Menu Item 4</a>
  </li>
</ul>

Answer 3

更简单的jQuery语法（用.list替换.menu，修改了选择器，修改了函数语法）：

$(function( ){
    $(".list li.active").show();
});

顺便说一句，这个目标只针对第一级：

$(function( ){
    $(".list > li.active").show();
});

jQuery显示子元素，如果他们有特定的类

3 个答案: