Mobile вопрос меню переключения (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/