0

我需要一点帮助才能让我的侧导航正常工作。

链接到我的工作版本：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;
    });
4

1 回答 1

2

你说的对。根据 span 元素的 parent() 创建一个变量，然后从那里开始：

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

...

从那里使用变量而不是“this”。

于 2012-07-05T16:17:11.440 回答