CODEWITHSUNDEEP
jqueryhtmljquery-selectors
GG.
GG.

Reputation: 21854

jQuery : element inside another, check the second by clicking on the first one

Sorry for this title impossible to understand.

I have this:

<a class="directory">
    Directory 1
    <a class="add">Add a file</a> //show/hide on mouseover
</a>

for:

enter image description here

I do a toggle when I click on the first <a> to view the files :

$('a.directory').click(function() {
    $(this).parent().find('ul:first').slideToggle('medium');
});

I add a file when I click on the second <a>.

How do I check that I just click on the first <a> to avoid opening the folder when I click on the second <a>?

I try this but doesn't work:

$('a.directory:not(.add)').click(function() {
    $(this).parent().find('ul:first').slideToggle('medium');
});

Upvotes: 0

Views: 102

Answers (2)

Sarfraz
Sarfraz

Reputation: 382696

Since your second link has class, you can use that to your benefit:

$('a.directory:not(.add)').click(function(e) {
    if (e.target.className === 'add') return false;
    $(this).parent().find('ul:first').slideToggle('medium');
});

Notice that addition of:

if (e.target.className === 'add') return false;

This would get out of function when you clicked on second Add File link which is what you are looking for.

Also your current markup isn't valid anyway . You need to try and fix that instead.

Upvotes: 2

John Fable
John Fable

Reputation: 1091

Pull the second <a> out of the first one, that is not valid HTML anyway. Then you can format using CSS to get the same effect stylistically.

<a class="directory">
     Directory 1
</a>
<a class="add">Add</a>

Your selectors should then work as you'd expect.

Upvotes: 1

Related Questions