Эффект триггера родительского события jQuery для дочернего элемента

Мой HTML-код выглядит следующим образом: (информация внизу)

<!DOCTYPE html>
<html>
    <head>
        <title>My Site</title>
        <link type='text/css' rel='stylesheet' href='style/style1.css'></link>
        <script type='text/javascript' src='scripts/jquery-2.0.0.min.js'></script>
        <script type='text/javascript' src='scripts/script1.js'></script>
    </head>
    <body>
        <div id="title">
            <h1>Welcome to My Site</h1>
        </div>
        <div id='menu_Bar'>
            <div id='home' class='selector'>
                <div class='back'>
                    <ul class='empty'>
                        <li>Home</li>
                        <div style='display: none'>
                            <li><a href=''>option 1</a></li>
                            <li><a href=''>option 2</a></li>
                            <li><a href=''>option 3</a></li>
                            <li><a href=''>option 4</a></li>
                            <li><a href=''>option 5</a></li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Мой JQuery это:

$(document).ready(function() {
    $('.selector').mouseenter(function (){
        $(this.'div ul div').slideToggle('slow');
    });

Теперь я знаю, что последняя часть не сработает (потому что я буду спрашивать, сработала ли она). Но я уверен, что вы видите, что я пытаюсь сделать. Я пытаюсь сделать так, чтобы при наведении курсора на него открывался его набор ссылок. Я почти собирался использовать.options для второй части, но понял, что это изменит (или повлияет) все в одном классе, что не позволит размещать похожие кнопки по бокам. Итак, как кто-то может использовать родителя, чтобы повлиять на ребенка родителя?

CSS:

div {
    border: 1px solid black;
}

.empty {
    list-style: none;
}

.options {
    display: none;
    background-color: lightblue;
}

.selector {
    background-color: transparent;
}
Источник

1 ответ

Решение

Должно быть

$(document).ready(function() {
    $('.selector').mouseenter(function (){
        $(this).find('> div > ul > div').slideToggle('slow');
    });
});

Демо: скрипка

Источник
Другие вопросы по тегам