【问题标题】:jQuery event parent trigger effect for child [duplicate]孩子的jQuery事件父触发效果[重复]
【发布时间】:2013-06-08 02:10:06
【问题描述】:

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

现在我知道最后一部分不起作用(因为我会问它是否起作用)。但我敢肯定,你明白我想要做什么。 I'm trying to make it so when the selector is hovered over it will open its set of links.我几乎打算在第二部分使用 .options ,但意识到它会在同一个类中全部更改(或影响),这将不允许在侧面放置类似的按钮。那么有人会如何使用父母来影响父母的孩子呢?

CSS:

div {
    border: 1px solid black;
}

.empty {
    list-style: none;
}

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

.selector {
    background-color: transparent;
}

【问题讨论】:

    标签: javascript jquery html css syntax


    【解决方案1】:

    应该是

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

    演示:Fiddle

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多