Question

我正在制作导航时遇到一些问题。

如果他们有孩子，我希望我的导航能够滑入子菜单并且不会链接到任何东西。如果一个孩子是活跃的（），那么父母也应该是活跃的，并自动显示孩子。到目前为止，我做了这项工作。

现在我希望父母改变课程，如果你点击它们。在.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();});

Answer 1

我并不完全确定你的目标是什么。但是，如果仅仅是你想将父类更改为活动类，那么这应该可以解决问题：

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;
            }
        }
    );
}

以下是适合您的问题：http://jsfiddle.net/XHCpg/

jQuery toggleclass导航

1 个答案: