jQuery幻燈片菜單切換

Question

我正在嘗試使用jquery構建一個滑動進/出導航菜單，但遇到了問題。 如果我單擊“ fa-bars”圖標，則只有該圖標，一切正常。 但是，當我單擊“ fa-times”圖標關閉導航菜單（我要它執行）時，它可以按需運行，但是“ fa-bars”圖標不再可單擊以重新打開菜單。 我知道它與我的JS代碼有關，但我無法破解。

 body { overflow-x: hidden; } ul { list-style: none; margin-top: 0px; padding: 0; } li { font-size: 30px; color: black; } .fa-bars { position: static; left: 100px; top: 10px; cursor: pointer; transition: all 0.5s ease-in-out; } .fa-bars:hover { opacity: 0.7; } .fa-times { position: absolute; top: 5px; right: 10px; cursor: pointer; transition: all 0.5s ease-in-out; } .fa-times:hover { opacity: 0.7; } nav { background-color: lightslategrey; width: 250px; position: fixed; top: 0; bottom: 0; z-index: 1; transform: translate3d(-250px, 0, 0); transition: all 0.5s ease-in-out; } .active-nav { transform: translate3d(0,0,0); } .closed-nav { transform: translate3d(-250px, 0, 0); } 

 <i class="fa fa-bars fa-3x" aria-hidden="true"></i> <nav> <ul> <i class="fa fa-times fa-2x"></i> <li>New TO</li> <li>Street TO</li> <li>Classy TO</li> <li>Athletic TO</li> </ul> </nav> JS: $(function () { $('.fa-bars').click(function () { $('nav').toggleClass('active-nav'); }); $('.fa-times').click(function() { $('.active-nav').toggleClass('closed-nav'); }); }); 

https://jsfiddle.net/sdvb45nj/

Answer 1

單擊關閉按鈕時問題開始

$('.active-nav').toggleClass('closed-nav');

使用上面的代碼，您將把closed-nav添加closed-nav ，該nav將關閉...之后

$('nav').toggleClass('active-nav'); 

使用上面的代碼，您可以在closed-nav仍處於打開active-nav從nav刪除active-nav

因此，您需要刪除closed-nav類並添加active-nav ..

為了解決您可以使用

$('nav').removeClass('closed-nav').addClass('active-nav');

代替

$('nav').toggleClass('active-nav');

 $(function () { $('.fa-bars').click(function () { $('nav').removeClass('closed-nav').addClass('active-nav'); }); $('.fa-times').click(function() { $('.active-nav').toggleClass('closed-nav'); }); }); 

 body { overflow-x: hidden; } ul { list-style: none; margin-top: 0px; padding: 0; } li { font-size: 30px; color: black; } .fa-bars { position: static; left: 100px; top: 10px; cursor: pointer; transition: all 0.5s ease-in-out; } .fa-bars:hover { opacity: 0.7; } .fa-times { position: absolute; top: 5px; right: 10px; cursor: pointer; transition: all 0.5s ease-in-out; } .fa-times:hover { opacity: 0.7; } nav { background-color: lightslategrey; width: 250px; position: fixed; top: 0; bottom: 0; z-index: 1; transform: translate3d(-250px, 0, 0); transition: all 0.5s ease-in-out; } .active-nav { transform: translate3d(0,0,0); } .closed-nav { transform: translate3d(-250px, 0, 0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <i class="fa fa-bars fa-3x" aria-hidden="true"></i> <nav> <ul> <i class="fa fa-times fa-2x"></i> <li>New TO</li> <li>Street TO</li> <li>Classy TO</li> <li>Athletic TO</li> </ul> </nav> 

Answer 2

您的事件處理程序被正確調用，但是您切換了錯誤的類，以下內容解決了該問題。

$('.fa-bars').click(function () {
    $('nav').toggleClass('active-nav');
});

$('.fa-times').click(function() {
    $('.active-nav').toggleClass('active-nav');
});