Using jquery in a dropdown

user_13520002 0
Viewed 63

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

css html jquery javascript
4 Answers

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

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

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");
        });
user_22339590

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");
});
user_36842650
Related