Question

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

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

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

应该是

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

然后它就破了。我需要在代码中更改什么？作为一个js新手，我一直盯着这段代码，但却未能看到toggle必须在外部容器上工作的原因/原因。

$('.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/

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

1 个答案: