javascript - 移动菜单切换问题（onclick 仅适用于外部容器，不适用于按钮）

Question

我有以下代码： http: //jsfiddle.net/GtC6x/10/（动画动态高度）

现在，您可以单击按钮和整个红色区域进行切换。我只希望紫色区域是具有这种标记结构的切换区域。

$('.nav-container').on('click', function() {

应该

$('.nav-toggle').on('click', function() {

但后来它打破了。我需要在代码中更改什么？作为一个 js 新手，我已经盯着这段代码看了一段时间，但没有看到切换开关必须放在外部容器上的位置/原因才能工作。

$('.nav-container').on('click', function() {
    slide($('.nav-wrap .nav', this));
});

function slide(content) {
    var wrapper = content.parent();
    var contentHeight = content.outerHeight(true);
    var wrapperHeight = wrapper.height();

    wrapper.toggleClass('expand');
    if (wrapper.hasClass('expand')) {
    setTimeout(function() {
        wrapper.addClass('transition').css('height', contentHeight);
    }, 10);
}
else {
    setTimeout(function() {
        wrapper.css('height', wrapperHeight);
        setTimeout(function() {
        wrapper.addClass('transition').css('height', 0);
        }, 10);
    }, 10);
}

wrapper.one('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function() {
    if(wrapper.hasClass('open')) {
        wrapper.removeClass('transition').css('height', 'auto');
    }
});
}

Answer 1

当将您的功能更改为.nav-toggle您this的不再针对container时，您nav-toggle需要获得相同的功能来获取您的父级，nav-toggle即nav-container.

$('.nav-toggle').on('click', function() {
    slide($('.nav-wrap .nav', $(this).parent()));
});

这是小提琴

http://jsfiddle.net/GtC6x/12/