Question

overflowY: hidden

所以sideBarAndWrapper var在点击“SidebarToggle”时切换了类，但它在if-else语句中没有做任何事情。

我尝试设置闹钟而不是更改文本指令。我还尝试在if-else语句之外设置一个警报，看它是否适用于“SidebarToggle”点击并且没有任何反应。

Click事件除了创建/删除类之外没有任何其他操作。

Answer 1

sideBarAndWrapper是一个集合。您可以设置两者但 PERHAPS 不使用hasClass进行查询 - 在v3.1.1中您可以

试试这个更优雅的版本

var $sideBarAndWrapper = $("#Sidebar,#Wrapper");

$("#SidebarToggle").on("click", function () {
  var tgl = $(this).data("tgl") || false; // or true depending on state
  $sideBarAndWrapper.toggleClass("hide-sidebar",tgl);
  $(this).text(tgl?"Show Sidebar":"Hide Sidebar");
  $(this).data("tgl",!tgl);     
});

Answer 2

<强>更新

使用working code/full example更新我的回答：

HTML

<div id="sidebar">sidebar</div>
<div id="wrapper">wrapper</div>

<button>click</button>

<p id="fill-me"></p>

的jQuery

var $sideBarAndWrapper = $("#sidebar,#wrapper");

$('button').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  $sideBarAndWrapper.toggleClass('hide-sidebar');

  if ($sideBarAndWrapper.hasClass('hide-sidebar')) {
    $('#fill-me').empty().text('show sidebar');
  } else {
    $('#fill-me').empty().text('hide sidebar');
  }
});

虽然我同意mplungjan，你应该以更有效的方式选择你的元素，但是如果你正确地编写了if / else语句，它就有效。

if (sideBarAndWrapper.hasClass("hide-sidebar")) {
    $(this).text("Show Sidebar");
} else {
    $(this).text("Hide Sidebar");
}

以下是基础知识的excellent place to start，由Rebecca Murphey

撰写和发布

Answer 3

似乎有一个关于

语法的故障

$("#SidebarToggle").on("click",function(){}).

替换它 $("#SidebarToggle").click(function(){})做了诀窍，现在它完美无缺。

点击事件的jQuery部分工作

3 个答案: