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

Mobile menu toggle issue (onclick only works on outer container, not button)

本文关键字：适用于 外部 不适用 按钮 菜单 问题 onclick 移动      更新时间：2023-09-26

>我有以下代码：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');
    }
});
}
当您将

函数更改为.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/

相关文章：