jQuery 显示具有特定 class 的子元素

Question

我想隐藏所有没有.active class 的元素。我目前使用的代码似乎不起作用。

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() 并且您的标记中没有带有 class .menu 的元素，请改用 .list（ .list > li).

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

.list li {
  display: none;
}

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

Answer 2

你有一些错别字：

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

除此之外，我认为您可以使 jQuery 更简单一些：

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

$(function() { ... }) 与 $(document).ready(function() { ... } 完全相同，我直接选择 li 元素 class .active 而不是第一个选择 li 元素，然后检查它们是否具有 class .active.

如果您希望显示整个菜单结构（例如 菜单 2、菜单 2.2、菜单 2.2 .3 您需要将 .list > li.active 更改为 .list li.active。然而，这也意味着将 .active class 移动到 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 显示具有特定 class 的子元素

jQuery show child elements if they have specific class

css

jquery

show

hide