Как DOM target в jQuery?

Question

Итак, в JS я бы сделал что-то вроде.

var subItems = document.querySelectorAll(".dropdown");

Затем выберите target с помощью dropItem [0] или цикла forEach.Теперь я тоже пытаюсь сделать это в jQuery.Делая что-то вроде:

$("p").click(function() {
  var dropwDown = $(this).find(".dropdown-contain");
  $(dropDown).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-dropdown">
  <div class="whisky">
    <p>Whisky</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
  <div class="wine">
    <p>Wine</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
  <div class="beer">
    <p>Beer</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
  <div class="cocktail">
    <p>Cocktail</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
</div>

Однако это не работает.Это HTML-код, который я пытаюсь настроить.Тогда особенно выпадающий класс.

Answer 1

Пара вещей:

• Элементы .dropdown-contain не входят в элементы p, поэтому find не найдет их.Если вы сначала подойдете к div, он будет:

  $(this).parent().find(".dropdown-contain");
  

• dropDown уже является объектом jQuery, не нужно снова делать $(dropDown).

• Ничто в том, что вы показали, не скрывает эти ul s, поэтому вызов show для них не будет иметь никакого видимого эффекта.

Вот обновленный фрагмент кода, использующий приведенный выше код, с .dropdown-contain { display: none; } в CSS, так что мы видим, что show работает:

$("p").click(function() {
  $(this).parent().find(".dropdown-contain").show();
});

.dropdown-contain {
  display: none;
}

<div class="menu-dropdown">
  <div class="whisky">
    <p>Whisky</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
  <div class="wine">
    <p>Wine</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
  <div class="beer">
    <p>Beer</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
  <div class="cocktail">
    <p>Cocktail</p>
    <div class="dropdown-contain">
      <ul class="dropdown">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>