如何将相同的切换注释与两个不同的 ID/类一起使用

How to use the same toggle comment with two different ID/Classes

本文关键字：ID 两个 一起 注释      更新时间：2023-09-26

我想做一个扩展侧边栏，我能够让侧边栏展开，但我需要覆盖被按下的原始按钮。

我想在侧面有一个区域，我可以单击以关闭侧边栏。

我快到了。我遇到的问题是单击时关闭 id 似乎不会触发切换。

这是我的代码

$("#icon-menu-mobile,#exit").each(function() {
  $(this).click(function() {
    var effect = 'slide';
    var options = 'left';
    var duration = 500;
    $('#panel').toggle(effect, options, duration);
  });
});
#panel {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 999;
}
.panelcontent {
  position: relative;
  top: 50px;
  width: 70%;
  height: 100%;
  background-color: #cccccc;
  float: left;
}
#icon-menu-mobile {
  width: 36px;
  height: 30px;
  cursor: pointer;
  font-size: 24px;
}
#icon-menu-mobile,
#exit {
  position: static;
  float: right;
  width: 30%;
  height: 100%;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
  <span id="icon-menu-mobile">
	☰						
</span>
  <div id="panel">
    <div class="panelcontent">
      Some text here to fill it out
    </div>
    <div id="exit">
      Click here to exit
    </div>
  </div>
</body>

如您所见，单击汉堡菜单后，您无法使用侧面关闭按钮将其关闭。

我猜切换开关只能从单击的第一个 id 开始工作，并且需要再次单击该 id 才能再次切换。

有没有办法让两个 id 激活相同的切换？

这是一个工作示例： http://codepen.io/anon/pen/pgGPrm

我认为您将相同的事件附加到两者，因此它不会滑向相反的方向，我将其拆分为：

$("#icon-menu-mobile").click(function() {
    var effect = 'slide';
    var options = 'left';
    var duration = 500;
    $('#panel').toggle(effect, options, duration);
});
$("#exit").click(function() {
    var effect = 'slide';
    var options = 'right';
    var duration = 500;
    $('#panel').toggle(effect, options, duration);
});

编辑：实际上，经过进一步检查，它们是否在一起似乎并不重要。 修复它的东西实际上是在我的代码笔中包含jQuery-UI。 你确定你正确地包含jQuery-UI吗？ 否则，您会在首张幻灯片后出现错误，这会阻止第二张幻灯片工作

相关文章：