Блог

Я пытаюсь создать ссылку, которая при наведении курсора исчезает в неупорядоченном списке, когда вы нажимаете на элемент списка в неупорядоченном списке, ul должен исчезнуть. На данный момент у меня возникли проблемы с разработкой того, как это можно сделать. Если кто-нибудь может объяснить мне, где я ошибаюсь, или у него есть какие-либо полезные советы о том, как я могу улучшить свой код, это было бы здорово.

Код здесь:http://jsfiddle.net/kyllle/W8AL5 /

Javascript

 $(document).ready(function() {
    $('#container li.hover').hover(function() {
        $(this).find('ul.countries').fadeToggle(200);
    });

    $('ul.countries a').click(function() {
        $('this').find('ul.countries').fadeOut(200);
    });
});
  

Ваш код на самом деле не так уж далеко. Всего пара проблем:

1. $('this') не работает. Вам нужно $(this) . this Ключевое слово указывает на элемент, на который был сделан щелчок.
2. .find('ul.countries') — find работает с элементами-потомками. ul Вам нужен родительский элемент. Метод, который вы хотите, это closest
3. Если вы хотите, чтобы пользователь оставался на той же странице, а не переходил по ссылке, вам следует использовать event.preventDefault .

Итак, в общей сложности:

 $(document).ready(function() {
    $('#container li.hover').hover(function() {
        $(this).find('ul.countries').fadeToggle(200);
    });

    $('ul.countries a').click(function(e) {
        e.preventDefault();
        $(this).closest('ul.countries').fadeOut(200);
    });
});
  

jsFiddle

find — неправильный выбор в вашей ситуации здесь. Он выполняет поиск только по потомкам элемента jQuery, и в этом случае ‘this’ всегда будет дочерним элементом ul, который вы пытаетесь получить. смотрите больше на find

вы можете запросить ul напрямую, если хотите:

 $('ul.countries').fadeToggle(200);
$('ul.countries').fadeOut(200);