JQuery slideToggle, свернуть дочерние элементы

0

У меня есть меню со складными подменю, есть 3 уровня меню, и он отлично работает, но я не знаю, как свернуть все дочерние уровни, когда вы нажимаете, чтобы свернуть родительский.

Способ, которым он работает, заключается в том, что если вы нажмете уровень 1, он расширит уровень 2, а затем, щелкнув уровень 2, он расширит уровень 3.

Проблема в том, что когда все уровни открыты, мне нужно иметь возможность щелкнуть уровень 1 и свернуть оба уровня 2 и 3 вместе. На данный момент я использую slideToggle.

Я вставил свой код ниже, и я знаю, что это действительно мусорный способ сделать это, но мне пришлось назначать поддельные теги H для элементов меню, потому что они генерируются элементом управления ASP: Menu и не дают уникального идентификатора элементам меню поэтому мне пришлось найти способ обойти это.

HTML:

<div id="Div1" class="MenuBar">
    <a href="#Menu1_SkipLink" style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">Skip Navigation Links</a>
    <div class="mainmenu" id="Div2">
        <ul class="level1">
            <li><a class="level1 staticItem level1">
                <img src="/images/calculator.png" alt="" title="" class="icon" /><h7>Financial</h7></a></li>
            <li><a class="level2 staticItem level2">
                <h10>Address</h10>
            </a></li>
            <li><a class="level3 staticItem level3" href="javascript:openNewWin(&#39;/Controls/Financial/AddressBook.aspx&#39;)">
                <h11>Address Book</h11>
            </a></li>
            <li><a class="level3 staticItem level3" href="javascript:openNewWin(&#39;/Controls/Financial/CustomerTypes.aspx&#39;)">
                <h12>Customer Types</h12>
            </a></li>
            <li><a class="level1 staticItem level1">
                <img src="/images/container.png" alt="" title="" class="icon" /><h8>Container</h8></a></li>
            <li><a class="level2 staticItem level2">
                <h13>Containers</h13>
            </a></li>
            <li><a class="level1 staticItem level1">
                <img src="/images/product.png" alt="" title="" class="icon" /><h9>Product</h9></a></li>
        </ul>
    </div>
    <a id="Menu1_SkipLink"></a>

</div>

JQuery:

$(function () {
    //When opening the page all level 2 and level 3 items must be hidden.
    $(function () {
        hideitems();
    })

    function hideitems() {
        $('h10').slideUp();
        $('h11').slideUp();
        $('h12').slideUp();
        $('h13').slideUp();
    }
    //Financial Click
    $(document).ready(function () {
        $('h7').click(function () {
            $('h10').slideToggle();

        });
    });
    //Address Click
    $(document).ready(function () {
    $('h10').click(function () {
        $('h11').slideToggle();
        $('h12').slideToggle();
    });
})
});

Любые предложения о том, как свернуть все вспомогательные уровни, будут очень признательны, поскольку я не являюсь мастером JS.

  • 0
    возможный дубликат кода Jquery для многоуровневого выпадающего меню навигации
  • 0
    Разница в том, что я не могу ничего изменить в UL, включая предоставление классов или идентификатора.
Показать ещё 3 комментария
Теги:
webforms

2 ответа

0

попробуйте использовать это http://jsfiddle.net/modaloda/B8b4z/1/

//Financial Click
$(document).ready(function () {
    $('h7').click(function () {
       $('h10').slideToggle(); 
       $('h11').slideUp("fast");
       $('h12').slideUp("fast");
    });
});
Поделиться
  • 0
    Что такое .title .content и т. Д.?
  • 0
    плз создать jsfiddle.net
Показать ещё 4 комментария
0

Без изменения разметки: постройте структуру, которая связывает подэлементы с элементами и использует их в .click().

Например, вы можете использовать данные $(...).data для связывания данных с узлом:

// init function :
// we stack all level2 and level3 items as subitems of the last level1 item we met
// we stack all level3 items as subitems of the last level2 item we met
function init() {
    var $menu = $('ul.level1');
    var lv1Itm = null,
        lv2Itm = null;
    $menu.find('a').each(function () {
        var subitems;
        var li = $(this).closest('li').get(0);
        if ($(this).hasClass('level1')) {
            lv1Itm = li;
            $(li).data('subitems', []);
        }

        if ($(this).hasClass('level2')) {
            lv2Itm = li;
            $(li).data('subitems', []);

            $(lv1Itm).data('subitems').push(li);
        }

        if ($(this).hasClass('level3')) {
            $(lv1Itm).data('subitems').push(li);
            $(lv2Itm).data('subitems').push(li);
        }
    });
}
init();

$('.level1').click(function (e) {
    var subitems = $(this).closest('li').data('subitems');
    var shouldHideSubmenus = $(subitems).is(':visible');
    if (shouldHideSubmenus) {
        // in this case, hide all 'li' children items
        $(subitems).slideUp();
    } else {
        // in this case, only show level2 items
        $(subitems).find('.level2').closest('li').slideDown();
    }
});

$('.level2').click(function (e) {
    var subitems = $(this).closest('li').data('subitems');
    var shouldHideSubmenus = $(subitems).is(':visible');
    if (shouldHideSubmenus) {
        // in this case, hide all 'li' children items
        $(subitems).slideUp();
    } else {
        // in this case, only show level3 items
        $(subitems).find('.level3').closest('li').slideDown();
    }
});

играть на скрипке

Поделиться
  • 0
    Я не знаю точно, что вы имеете в виду, вы можете привести пример? имея в виду, я могу только изменить текст уровней меню и ничего больше.
  • 0
    Как я уже сказал, я не могу изменить разметку, кроме текста. Он генерируется ASP: меню управления, поэтому я должен использовать то, что у меня есть.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню