0

我正在制作的导航有一点问题。

我希望我的导航通过子菜单向下滑动，而不是链接到任何东西，如果他们有孩子的话。如果一个孩子是活动的（），那么父母也应该是活动的，并自动显示孩子。到目前为止，我完成了这项工作。

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

1 回答 1

2

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

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/

于 2012-01-26T11:06:12.480 回答