Навигация по тумблерному классу jQuery - PullRequest
Новая
       37

Навигация по тумблерному классу jQuery

0 голосов
/ 26 января 2012

У меня небольшая проблема с навигацией, которую я делаю.

Я хочу, чтобы моя навигация двигалась вниз с помощью подменю и не связывалась ни с чем, если у них есть дети. И если child active (), то родитель тоже должен быть активным, и автоматически показывать потомков. Пока я сделал эту работу.

Теперь я хочу, чтобы родители изменили класс, если вы нажмете на них. Переключение между .active и обычным стилем. Я могу получить только стандартные ссылки для этого, и если вы щелкнете по неактивному родителю, то активный родитель должен сдвинуть детей вверх и деактивироваться.

Кто-нибудь, кто может помочь мне с этим вопросом?

Пока мой код выглядит так: 

<ul class="menu collapsible expandactive" id="products">
  <li class="item"><a href="#" >Tryksager</a>
    <ul>
      <li><a href="#">A3 / A4 Plakater</a></li>
      <li><a href="#">Blokke</a></li>
      <li><a href="#">Brevpapir</a></li>
      <li><a href="#">Flyers / l&oslash;sark</a></li>
      <li><a href="#">Foldere</a></li>
      <li><a href="#">Kuverter</a></li>
      <li><a href="#">Visitkort</a></li>
    </ul>
  </li>
  <li class="item active parent"><a href="#" >Storformat print</a>
    <ul>
      <li><a href="#">Plakater</a></li>
      <li><a href="#">Canvas / L&aelig;rred</a></li>
      <li class="active"><a href="#">Klisterm&aelig;rker</a></li>
      <li><a href="#">Folie</a></li>
      <li><a href="#">Rollup System</a></li>
    </ul>
  </li>
  <li class="item"><a href="#" >Grafisk Design</a></li>
  <li class="item"><a href="#" >Hjemmesider</a></li>
  <li class="item"><a href="#" >G&oslash;r Det Selv</a></li>
  <li class="item"><a href="#" >Om Trykkeriet</a></li>
  <li class="item"><a href="#" >Diverse</a></li>
</ul>

А мой jQuery выглядит так: 

function initProducts() {
$('ul#products ul').hide();
$.each($('ul#products'), function(){
    $('#' + this.id + '.expandactive li.active ul').show();
});
$('ul#products li a').click(
    function() {
        var checkElement = $(this).next();
        var parent = this.parentNode.parentNode.id;

        if($('#' + parent).hasClass('noaccordion')) {
            $(this).next().slideToggle('normal').removeClass('active');
            return false;
        }
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            if($('#' + parent).hasClass('collapsible')) {
                $('#' + parent + ' ul:visible').slideUp('normal');
            }
            return false;
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#' + parent + ' ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    }
);
}
$(document).ready(function() {initProducts();});

1 Ответ

2 голосов
/ 26 января 2012

Я не совсем уверен, чего вы хотите достичь. Однако, если вы просто хотите поменять только родительский класс на активный, то это должно помочь: 

function initProducts() {
    $('ul#products ul').hide();
    $.each($('ul#products'), function(){
        $('#' + this.id + '.expandactive li.active ul').show();
    });
    $('ul#products li a').click(
        function() {
            var checkElement = $(this).next();
            var parent = this.parentNode.parentNode.id;

            if($('#' + parent).hasClass('noaccordion')) {
                $(this).next().slideToggle('normal').removeClass('active');
                return false;
            }
            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                if($('#' + parent).hasClass('collapsible')) {
                    $('#' + parent + ' ul:visible').slideUp('normal');

                    // ADDED CODE
                    $(this).parent().removeClass("active");
                    $(this).parent().find("li").removeClass("active");
                    // END
                }
                return false;
            }
            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#' + parent + ' ul:visible').slideUp('normal');
                checkElement.slideDown('normal');

                // ADDED CODE
                $(this).parent().addClass("active");
                // END

                return false;
            }
        }
    );
}

Вот вам jsfiddle: http://jsfiddle.net/XHCpg/

...