How to use a pseudo element added with jquery with the click function

Question

The code I put in works but I would like to use that arrow class that was previously created, instead of using li.parent in this way $('.Arrow').click(function ()... but it does not work for me it is possible to achieve it?

$('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>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Mar 11 '19 at 16:45
From the duplicate: `$(document).on("click", ".arrow", function() { alert("arrow clicked"); });` — freedomn-m, Mar 11 '19 at 16:48

Olufemi Adesina · Accepted Answer · 2019-03-12T16:51:49.870

0

$('.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>

Tidied up the code base a bit but this should get you what you are looking for.

EDIT

Added an if statement to the JS file that will handle a repeat click on a list that will toggle the list.

edited Mar 12 '19 at 16:51

answered Mar 11 '19 at 17:19

Olufemi Adesina

129
4

Hi, thanks, it works perfectly, but I have a question about how to remove the previous created class, that is, if I expand another item, the others previously open will contract. – Carl Mar 11 '19 at 20:04
Oh my bad. Just need to add the code you had before: ```$('.parent').not(this).find('.sub-nav.visible').removeClass('visible');``` I'll reflect in the answer. If it helps, don't forget upvote ;) – Olufemi Adesina Mar 11 '19 at 21:19
Hello, thank you. I just tried and it works but I have a doubt when I click on the arrow that is currently open, it does not contract, but if it contracts when I click on another arrow, I try to modify it but it does not work, but thanks and positive feedback. – Carl Mar 12 '19 at 14:23
I see... Will have a look now – Olufemi Adesina Mar 12 '19 at 16:28
Added Edits for your problem – Olufemi Adesina Mar 12 '19 at 16:55
No problem. Glad I could help. – Olufemi Adesina Mar 13 '19 at 08:51

How to use a pseudo element added with jquery with the click function

1 Answers1