Using jquery in a dropdown

Question

I want to use this code to let the edit and the delete button appear after clicking the ... button, but when I do this it apply at all three of them and not the at the one i clicked

So, I want someone to tell me what should i change in the jquery code to only apply it to the one that i clicked not all of them

The Code :-

HTML :

<div class="commentdropdown pr-3">
    <button class="dropbtn btn p-0 m-0 bg-white">...</button>
    <div class="dropdown-content">
        <a href="#">Edit</a>
        <a href="#">Delete</a>
    </div>

    <button class="dropbtn btn p-0 m-0 bg-white">...</button>
    <div class="dropdown-content">
        <a href="#">Edit</a>
        <a href="#">Delete</a>
    </div>

    <button class="dropbtn btn p-0 m-0 bg-white">...</button>
    <div class="dropdown-content">
        <a href="#">Edit</a>
        <a href="#">Delete</a>
    </div>
</div>

CSS :

.commentdropdown{
    float: right;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
}

.apear{
    display: block;
}

.commentbtn{
    width: 30vw;
}

JavaScript :

$(".commentdropdown").on("click", function(){
 $(".dropdown-content").toggleClass("apear");
});

Thanks

Prince Singh · Accepted Answer · 2020-08-20 17:51:27Z

$(document).ready( function() {
    $(".commentdropdown .dropbtn").on("click", function(e){
      $(this).next('.dropdown-content').toggleClass("apear");
    });
});

.commentdropdown{
    float: right;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
}

.apear{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="commentdropdown pr-3">
    <button class="dropbtn btn p-0 m-0 bg-white">btn 1</button>
    <div class="dropdown-content">
        <a href="#">Edit 1</a>
        <a href="#">Delete 1</a>
    </div>

    <button class="dropbtn btn p-0 m-0 bg-white">btn 2</button>
    <div class="dropdown-content">
        <a href="#">Edit 2</a>
        <a href="#">Delete 2</a>
    </div>

    <button class="dropbtn btn p-0 m-0 bg-white">btn 3</button>
    <div class="dropdown-content">
        <a href="#">Edit 3</a>
        <a href="#">Delete 3</a>
    </div>
</div>

Try this.

Bruce Adams · Accepted Answer · 2020-08-20 17:50:47Z

1

$('.dropbtn').on('click', function(){
  $(this).closest('.dropdown-content').toggleClass('apear');
});

edited Aug 20, 2020 at 17:50

answered Aug 20, 2020 at 17:43

Bruce Adams

12.4k6 gold badges31 silver badges37 bronze badges

Comments

imvain2 · Accepted Answer · 2020-08-20 17:47:16Z

0

By referring to commentdropdown in the event handler, you are allowing the clicking on the entire object including all children.

The easiest solution is add the event listener to the buttons.

$(".dropbtn").click(function(){
    $(this).closest(".dropdown-content").toggleClass("apear");
});

answered Aug 20, 2020 at 17:47

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Comments

Asutosh · Accepted Answer · 2020-08-20 17:49:22Z

0

In your code $(".dropdown-content").toggleClass("apear"), does toggle the class for all the element having class dropdown-content. You can fix it by finding the clicked one's closest element containing dropdown-content.

Can you try like below:

   $(".commentdropdown").on("click", function(evt){
             $( event.target ).closet('.dropdown-content').toggleClass("apear");
        });

edited Aug 20, 2020 at 17:49

answered Aug 20, 2020 at 17:43

Asutosh

1,8382 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using jquery in a dropdown

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related