Question

我的Rails应用程序中的代码在单击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/

Answer 1

看完这个后，我决定在我的陈述中添加id toggleback，如下所示。

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

然后我按照以下方式为#toggleback复制＃menu-toggle的javascript来测试它。

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

现在，当我点击x时，侧边栏会切换为关闭。

这是我的最终JavaScript代码。

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

我猜我认为工作的是侥幸。

Answer 2

您的代码存在一些问题，导致其无法以您希望的方式运行。

这一行很可能不符合你的想法。
```
$("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＆＃39; closest函数，重新检查是否在侧边栏中单击？。它还会单独检查关闭按钮的点击次数，并启用该按钮。

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

2 个答案: