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 に答える