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');
    }
});
}