jQuery事件处理程序不切换CSS类

我在我的网站上有一个叫做“登录”的按钮，当点击这个按钮时，会出现一个下拉框，允许用户输入他们的详细信息。下拉列表是在jQuery脚本中处理的，但是它似乎不起作用

HTML:

-这是我在我的网站上的确切代码，当我点击按钮时，什么也没有发生

JsFiddle

将您的css更改为此

#header .header-top-bar .header-login div,
 #header .header-top-bar .header-register div {
  top: 80px;
  display:none;
}

#header .header-top-bar .header-login.active div,
#header .header-top-bar .header-register.active div {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

---

首先提供完整的

HTML

。此外，问题中指定的选择器是

$（'#header.header login，#header.headerregister'）

并且我没有看到

标题

，因此在这种情况下事件将不会被绑定。您的意思是登录表单必须在用户单击登录链接后出现吗？当您说“dropdown”时，您的意思是一个隐藏的DIV，即带有表单元素的DIV，将从顶部显示。是吗？@是的，只有当用户单击时表单才会出现it@IndieRok是的，它将出现在JSFIDLE的顶部，但当我在Apache版本中使用此CSS时，它似乎没有任何作用，它只是在URL的末尾添加了一个#再次正确检查代码。我不认为服务器的问题在于代码完全相同（我复制并粘贴了它），我不确定问题出在哪里。你可以做的就是去掉链接，用一个简单的DIV替换它。超链接是指将用户带到另一个页面或下载文件或其他内容。点击超链接将产生页面刷新，在url末尾添加#。我发现，当我更改为该超链接时，该框会如我所愿显示。因此，排除了CSS的任何问题，我假设它是HTML或jQuery

 var $headerLoginRegister = $('#header .header-login, #header .headerregister');

$headerLoginRegister.each(function () {
 var $this = $(this);

 $this.children('a').on('click', function (event) {
     event.preventDefault();
     $this.toggleClass('active');
 });

 $this.on('clickoutside touchendoutside', function () {
     if ($this.hasClass('active')) {
         $this.removeClass('active');
     }
 });

 });



var $headerNavbar = $('#header .header-nav-bar .primary-nav > li');

  $headerNavbar.each(function () {
var $this = $(this);

$this.children('a').on('click', function (event) {
  $this.toggleClass('active');
});

$this.on('clickoutside touchendoutside', function () {
  if ($this.hasClass('active')) { $this.removeClass('active'); }
 });
});

#header .header-top-bar .header-login div,
 #header .header-top-bar .header-register div {
  top: 80px;
  display:none;
}

#header .header-top-bar .header-login.active div,
#header .header-top-bar .header-register.active div {
    display: block;
    opacity: 1;
    transform: translateY(0);
}