如何通过单击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/

您可以创建一个[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"); 
});

我想我以为工作是一个侥幸。

但是，这样可以消除在单击外侧时关闭边栏的行为，不是吗？ –

是的，我的代码允许侧边栏在侧边栏外点击时关闭。我还想在顶部添加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函数。它还为关闭按钮上的点击单独添加检查，启用该按钮。

如何通过单击X来更正我的代码以关闭切换的侧边栏窗口？

相关推荐