Применить как открытое, так и закрытое состояние к той же кнопке?

Question

Я начинающий jQuery.

Пытается применить близкое состояние к той же кнопке гамбургера, что и открытое состояние.

Я могу нажать кнопку гамбургера и открыть навигационную систему, но при дублировании кнопки и применении состояния закрытия она, похоже, не хочет работать.

Я следую за эту статью: http://css-tricks.com/off-canvas-menu-with-css-target/

Вот мой codepen: http://codepen.io/Goatsy/pen/mBqku

<a href="#main-nav" class="open-menu"> 
<button> 
    <span class="line line-t"></span> 
    <span class="line line-m"></span> 
    <span class="line line-b"></span> 
</button> 
    </a> 


    <a href="#" class="close-menu"> 
<button> 
    <span class="line line-t"></span> 
    <span class="line line-m"></span> 
    <span class="line line-b"></span> 
</button> 
    </a> 

Update: Я добавил, что я надеюсь, что это право функция переключения. Теперь навигатор исчезает. Я хочу, чтобы nav закрылся, щелкнув X. И nav, чтобы открыть, щелкнув гамбургер.

$("button").on("click",function(){ 
    $(this).toggleClass("menu-on"); 
}); 


$("button").click(function() { 
    $("nav").toggle(); 
}); 

Answer 1

Вы должны использовать функцию .toggle и here учебник о том, как использовать его.

Например, если вы хотите, чтобы включить показ и скрыть для DIV с баром ID:

$("button").click(function() { 
    $('#bar').toggle(function() { 
    $(this).show(1000); 
    }, function() { 
    $(this).hide(1000); 
    }); 
});