Как использовать псевдоэлемент, добавленный с помощью jquery, с функцией click - PullRequest
Новая
       33

Как использовать псевдоэлемент, добавленный с помощью jquery, с функцией click

0 голосов
/ 11 марта 2019

Код, который я вставил, работает, но я хотел бы использовать тот класс стрелки, который был создан ранее, вместо использования li.parent таким образом $('.Arrow').click(function ()..., но он не работает для меня, возможно ли его достичь? 

$('ul#nav li.parent').before('<a class="arrow" href="#"></a>');

$(document).ready(function() {
  $('.parent').click(function() {
    $('.parent').not(this).find('.sub-nav.visible').removeClass('visible');
    $('.sub-nav', this).toggleClass('visible'); //find .sub-nav of clicked .parent
  });
});
#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}

.arrow {
  width: 10px;
  height: 10px;
  background: red;
  display: inline-block;
  float: right;
  position: relative;
  right: 50%;
  margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">Home
    <ul class="sub-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
  </li>
  <li class="parent">Contact</li>
</ul>

1 Ответ

0 голосов
/ 11 марта 2019 

$('.sub-nav').before('<a class="arrow" href="#"></a>');

$(document).ready(function() {
  $('.arrow').click(function() {
    var list = $(this).parent()
    var subList = $(list).children('.sub-nav')
    if(!$(subList).hasClass('visible')) {
    	$('.parent').not(this).find('.sub-nav.visible').removeClass('visible');
    }
    $(subList).toggleClass('visible');
  });
});
#nav ul.sub-nav {
  display: none;
}
#nav ul.visible {
  display: block;
}
.arrow {
  width: 10px;
  height: 10px;
  background: red;
  display: inline-block;
  float: right;
  position: relative;
  right: 50%;
  margin-top: 5px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav">
  <li class="parent">Home
    <ul class="sub-nav">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
  </li>
  <li class="parent">Contact</li>
  <li class="parent">Help
    <ul class="sub-nav">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
  </li>
  <li class="parent">Argon
    <ul class="sub-nav">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
  </li>
</ul>

Немного исправил кодовую базу, но это должно дать вам то, что вы ищете.

EDIT

Добавлен оператор if в файл JS, который будет обрабатывать повторный щелчок по списку, который будет переключать список.

...