Question

我有一组div s（systemHeaders），每个都有标题h2和子div。每个子div（子系统）都有一个标题h3和一个包含一些链接的子div。当我点击systemHeader时，我想只切换子系统div。当我点击subSystemHeader时，我想只切换报告div。

实际发生的是，无论我点击什么，切换子系统div！

如何让它按照应有的方式工作，并且只针对每种类型的点击切换第一个孩子div？

<div class="pod">
    <li id='ThirdParty'>
        <div class='block'>
            <h1>ThirdParty</h1><img class='blockNoBorder' src='images/thirdparty.jpg' width="200"></img>
            <div class='systemHeader'>
                <h2><span>Bobs shop</span></h2>
                <div class='subSystems'>                    
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Gifts</span></h3>
                        <div class='reports '>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=471' title=''>Option 2</a></p>
                        </div>
                    </div>
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Directory</span></h3>
                        <div class='reports hidden'>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=466' title=''>Option 3</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=461' title=''>Option 4</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class='systemHeader'>
                <h2><span>Robs shop</span></h2>
                <div class='subSystems'>
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Gifts</span></h3>
                        <div class='reports '>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=480' title=''>Option 5</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=481' title=''>Option 6</a></p>
                        </div>
                    </div>
                    <div class='subSystemHeader'>
                        <h3><span>&nbsp;Directory</span></h3>
                        <div class='reports hidden'>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=486' title=''>Option 7</a></p>
                            <p class='reports i1'>
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=481' title=''>Option 8</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</div>


            <script>
                jQuery(document).ready(
                function()
                {
                    jQuery('div.systemHeader').click(
                    function()
                    {
                        jQuery(this).find('div:first').slideToggle();
                    });
                },
                function()
                {
                    jQuery('div.subSystemHeader').click(
                    function()
                    {
                        jQuery(this).find('div:first').slideToggle();
                    });
                });
            </script>

Answer 1

find()将寻找所有级别的所有儿童;您可以使用children()代替，也可以使用以下示例：

$("div.subSystemHeader, div.subSystemHeader").click(function() {
   $("> div", this).slideToggle(...);
   return false;
});

我希望这有帮助！

嵌套div时切换错误的元素

1 个答案: