如何通過單擊X來更正我的代碼以關閉切換的側邊欄窗口？

我在我的Rails應用程序中有代碼，它在單擊X時成功關閉了切換邊欄。我做了其他更改，以某種方式阻止我的代碼工作。當我將鼠標懸停在x上時，它突出顯示爲其他鏈接，但是當我點擊它時，窗口保持打開狀態，並在當前鏈接的末尾追加/#。當我點擊邊欄中的其他鏈接時，他們會顯示正確的視圖並關閉側邊欄。我改變了一些我找不到的東西。如何通過單擊X來更正我的代碼以關閉切換的側邊欄窗口？

我的側邊欄，其中X是指：

<ul class="sidebar-nav"> 
    <li class="sidebar-close"><%= link_to "#" do %><i class="fa fa-times"></i><% end %></li> 
    ..... 
</ul>

CSS的側邊欄關閉：

.sidebar-nav > .sidebar-close { height: 50px; font-size: 150%; line-height: 200%; color: $sideBarClose; text-align: right; padding-right: 10px; } 
.sidebar-nav > .sidebar-close a { color: $sideBarLink; } 
.sidebar-nav > .sidebar-close a:hover { color: $white; background: none; }

我的菜單按鈕：

<div class="menu-button"><%= link_to "#menu-toggle", class: "btn btn-default btn-lg", id: "menu-toggle" do %><i class="fa fa-bars"></i><%= " #{t :menu}" %><% end %></div>

的CSS菜單按鈕：

.menu-button { padding-top: 10px; position: absolute; left: 15px; top: 0px; z-index: 1; }

腳本（包括代碼以關閉窗口，如果你點擊側邊欄之外：

$("body, html").not('#menu-toggle').click(function(e) { 
    console.log(e.target); 
    if($('#wrapper').hasClass("toggled") && !$(e.target).is('#menu-toggle, #sidebar-wrapper, #sidebar-wrapper *')) 
    { 
    //alert('asd'); 
    $("#menu-toggle").trigger("click"); 
    } 
}); 
$("#menu-toggle").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
});

我會提到，我沒有任何特殊的Javascript這個工作。點擊X不再關閉窗口，我只是沒有看到我改變了什麼。

更新：在@Justastudent的幫助下，我能夠創建一個JSFiddle。當你點擊菜單按鈕時，它會很好地切換。如果您打開邊欄並點擊邊欄以外的邊欄將關閉。如果您點擊邊欄右上角的X，則不起作用。它似乎卡住了。當我在系統上點擊X時，頁面向下滾動，我無法將其滾動回頂端。我必須關閉標籤並訪問新標籤中的鏈接才能顯示小提琴頁面的頂部。

https://fiddle.jshell.net/lightbe/x0n151rt/5/

來源

2017-05-04 Pamela Cook - LightBe Corp

您可以創建一個[mcve]，以便重現問題嗎？ –

我不知道我能得到多少最小化。請停止瘋狂。我不會有一些熱門的東西來炫耀。 –

如果我把我所有的代碼都告訴我簡化代碼。很明顯，只有一個學生沒有做任何事情，只是吠叫。我已經簡化了代碼。我可以很好地重現它。建設性的批評我會接受。不幼稚的垃圾。 –

看着這個和關閉後，我決定ID toggleback添加到我的發言如下。

<li class="sidebar-close" id="toggleback"><%= link_to "#" do %><i class="fa fa-times"></i><% end %></li>

然後，我重複了＃menu-toggle for #toggleback的javascript，如下所示來測試它。

$("#toggleback").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
});

現在，當我點擊側邊欄切換關閉。

這是我的最終JavaScript代碼。

$("#menu-toggle, #toggleback").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
});

我想我以爲工作是一個僥倖。

來源

2017-05-06 11:23:30

但是，這樣可以消除在單擊外側時關閉邊欄的行爲，不是嗎？ –

是的，我的代碼允許側邊欄在側邊欄外點擊時關閉。我還想在頂部添加X以關閉它，前提是人們可能不知道如何在框外點擊以關閉側邊欄。 –

啊，我以爲你已經用你答案中的最後一個代碼替換了你的所有JavaScript。在[我的答案]（// stackoverflow.com/a/43821775/962603）我試圖解釋爲什麼代碼無法正常工作，並且正在給出一種解決方法。這個答案中的解決方案顯然也適用:-) –

你的代碼有幾個問題，阻止它按照你想要的方式工作。

此行可能不會做你認爲它的作用。
```
$("body, html").not('#menu-toggle').click(function(e) { /* ... */ 
```
它會附加一個單擊處理程序都的html和body元素，過濾那些兩到那些不具備id="menu-toggle"'。都沒有，因爲只有一個div與該ID。由於html是body和click事件泡泡的父級，因此對於每個點擊事件，此點擊處理程序會觸發兩次。

這是最好的檢查還沒有被處理的其他地方對全球window事件：

$(window).click(function(e) { /* ... */

檢查事件的目標是有缺陷的。您檢查點擊不針對側邊欄如下：

!$(e.target).is('#menu-toggle, #sidebar-wrapper, #sidebar-wrapper *')

然而，由於側邊欄的關閉按鈕的邊欄中，此檢查不會觸發該按鈕的點擊。因此，該按鈕不會關閉邊欄。

以下JavaScript顯示爲work the way you intend it to。

// toggle menu on clicking anywhere outside of it $(window).click(function(e) { var $t = $(e.target); if ($('#wrapper').hasClass('toggled') && !$t.is('#menu-toggle') && ($t.closest('#sidebar-wrapper').size() === 0 || $t.closest('.sidebar-close').size() === 1)) { $('#menu-toggle').trigger('click'); } }); // toggle menu on button click $('#menu-toggle').click(function(e) { e.preventDefault(); $('#wrapper').toggleClass('toggled'); });

這個用於檢查是否是側邊欄中的點擊？使用jQuery的closest函數。它還爲關閉按鈕上的點擊單獨添加檢查，啓用該按鈕。

來源

2017-05-06 14:45:02

如何通過單擊X來更正我的代碼以關閉切換的側邊欄窗口？

回答

相關問題