Неправильные элементы переключаются при вложенных элементах div - PullRequest
Новая
       20

Неправильные элементы переключаются при вложенных элементах div

0 голосов
/ 14 октября 2010

У меня есть набор 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>

1 Ответ

1 голос
/ 14 октября 2010

find () будет искать всех детей на всех уровнях; вы можете использовать children () или использовать следующий пример: 

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

Надеюсь, это поможет!

...