jQuery показывает дочерние элементы, если у них есть определенный класс

Я хочу скрыть все элементы, которые не имеют класс.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;

});
Источник

3 ответа

Решение

У вас есть некоторые опечатки:

  1. Вместо того, чтобы использовать .list ты использовал .menu
  2. Вместо того, чтобы использовать .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>

Источник

Упрощенный синтаксис jQuery (заменено.menu на.list, изменен селектор, изменен синтаксис функции):

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

Кстати, этот будет предназначен только для первого уровня li:

$(function( ){
    $(".list > li.active").show();
});
Источник

.show это функция, она должна быть .show() и нет элемента с классом .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>

Источник
Другие вопросы по тегам