Question

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

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

我很难弄清楚对象之间的关系。在我的第二个例子中，$（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;
    });

Answer 1

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

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

...

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

如何制作类似Google的侧导航？

1 个答案: