Question

我的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;
}

Answer 1

应该是

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

演示：Fiddle

子进程的jQuery事件父触发器效果

1 个答案: