0

サイド ナビを正しく機能させるには、少し助けが必要です。

私の作業バージョンへのリンク: http://recx.vaughndtaylor.com/

ナビゲーションが適切に拡大/縮小することに注意してください。たとえば、+ をクリックするとメニューが展開されるようにしたいのですが、リンクはページに移動したいと考えています。

例として Google のサイド ナビゲーションを使用しています: https://developers.google.com/chart/

この例のトグルはクリックできますが、リンクをクリックすることもできます。

これは私が持っているものです:

 $('li.openable').click(function(){
        if ($(this).children('div.accordion').is(':hidden')) {
            $(this).siblings().removeClass('active').children('div.accordion').slideUp();
            $(this).toggleClass('active').children('div.accordion').slideDown('fast');
        } else {
            $(this).removeClass('active').children('div.accordion').slideUp('fast');
        }
        return false;
    });

私はこのようなものがもっと必要だと思います：

$('li.openable > span.icon').click(function(){
    if ($(this).children('div.accordion').is(':hidden')) {
        $(this).siblings().removeClass('active').children('div.accordion').slideUp();
        $(this).toggleClass('active').children('div.accordion').slideDown('fast');
    } else {
        $(this).removeClass('active').children('div.accordion').slideUp('fast');
    }
    return false;
});

ここでオブジェクト間の関係を理解するのに苦労しています。2 番目の例では、$(this) はもはや正しいオブジェクトではありません (これは現在、span.icon です)。これを変数として設定しますか？リレーションシップを使用しますか (例: siblings()、parents()?)

この問題に関するヘルプをいただければ幸いです。

ありがとう！

更新:これは、以下の提案を使用して問題を解決した方法です:

$('li.openable > span.icon').click(function(){
        var expander = $(this).parents('li');
        if (expander.children('div.accordion').is(':hidden')) { 
            expander.siblings().removeClass('active').children('div.accordion').slideUp(); 
            expander.toggleClass('active').children('div.accordion').slideDown('fast'); 
        } else {
            expander.removeClass('active').children('div.accordion').slideUp('fast');
        }
        return false;
    });
4

1 に答える 1

2

あなたは正しいことを言いました。span 要素の parent() に基づいて変数を作成し、そこから移動します。

$('li.openable > span.icon').click(function(){
    var thingToExpandOrContract = $(this).parents('li');

...

「this」の代わりに変数を使用してそこから移動します。

于 2012-07-05T16:17:11.440 に答える