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

Question

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

JSFIDDLE

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

你有一些错别字:

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

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

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

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

如果您希望显示整个菜单结构(例如 Menu 2、Menu 2.2、Menu 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>