如何製作類似Google的側邊導航？

鏈接到我的工作版本：http://recx.vaughndtaylor.com/

注意，資產淨值擴張/收縮正常，但我希望有+/-獨立行事的聯繫。例如，我希望菜單在點擊+時展開，但我希望鏈接轉到頁面。

我使用谷歌的側導航爲例：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; 
});

我在這裏搞清楚對象之間的關係的困難。在我的第二個例子中，$（this）不再是正確的對象（現在是span.icon）。我是否將其設置爲一個變量？我是否使用關係（例如，兄弟姐妹（），父母（）？）

對此問題的任何幫助將不勝感激。

謝謝！

更新：這是我如何使用下面的建議解決了這個問題：

$('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; 
    });

來源

2012-07-05 Vaughn D. Taylor

你說的正確的事。從那裏使用，而不是「這個」變量

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

...

轉到：請根據跨度元素的父（）的變量，並從那裏走。

來源

2012-07-05 16:17:11 Benmj

如何製作類似Google的側邊導航？

回答

相關問題