jQuery: элемент внутри другого, проверьте второй, нажав на первый

Question

Извините за это название невозможно понять.

У меня есть это:

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

для:

Я переключаю, когда нажимаю на первый <a>, чтобы просмотреть файлы:

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

Я добавляю файл, когда нажимаю второй <a>.

Как проверить, что я просто нажимаю на первый <a>, чтобы не открывать папку при нажатии на второй <a>?

Я пробую это, но не работает:

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

Answer 1

Поскольку ваша вторая ссылка имеет класс, вы можете использовать это в своих интересах:

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

Обратите внимание, что добавление:

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

Это может выйти из строя при нажатиина второй ссылке Добавить файл, которая вам нужна.

---

Также ваша текущая разметка в любом случае недействительна.Вы должны попытаться исправить это.

Answer 2

Вытащите второе <a> из первого, которое в любом случае не является допустимым HTML. Затем вы можете отформатировать с помощью CSS, чтобы получить тот же эффект стилистически.

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

Ваши селекторы должны работать так, как вы ожидаете.