JQuery click function exception

Question

I show a container <div class="expand">that, when clicked, expands sectionbelow it:

HTML:

<div class="expand">
    <div class="container1">
         <div class="container2">
             <a class="view">View</a>
             <a class="download">Download</a>
         </div>
    </div>
</div>

<section class="hidden">
...
</section>

JQuery

$('.expand').click(function () {

   var $this = $(this);
   $this.next().show();

});

As you can see, <div class="expand">there is a Download button as a child . This download button should be the only element in this container itself that does not start the specified section to be displayed.

So, I would like to do something like this:

$('.expand').not(".download").click(function () {
...
});

or

$('.expand').except(".download").click(function () {
...
});

Answer 1

You need to enable the function at the end of the code:

Here: event.stopPropagation()

Try it, it will work!

Answer 2

You can also use event.stopPropagation () :

$('.download').click(function(event) {
    event.stopPropagation();
}

$('.expand').click(function () {
    ...
});

DOM .

Answer 3

e.target, , clicked

$('.expand').click(function (e) {

    if (!$(e.target).is(".download")) {
        var $this = $(this);
        $this.next().show();
    }

});

Answer 4

you can add stoppropagation () function after your code.

$('.expand').click(function (event) {   var $this = $(this);   $this.next().show();

event.stopPropagation (); });

Answer 5

You need to event.stopPropagation(). This stops the event from sparging or spreading to children.

$('.expand').find(".download").click(function (event) {
     event.stopPropagation()
})