Question

我的网站上有一个名为＆＃34;登录＆＃34;当单击此按钮时，会出现一个下拉框，允许用户输入其详细信息。下拉列表在jQuery脚本中处理，但它似乎无法正常工作。

HTML：

 <div class="header-login">
        <a href="#" class=""><i class="fa fa-power-off"></i> Login</a>
        <div>
            <form action="#">
                <input type="text" class="form-control" placeholder="Username">
                <input type="password" class="form-control" placeholder="Password">
                <input type="submit" class="btn btn-default" value="Login"> <a href="#" class="btn btn-link">Forgot Password?</a>
            </form>
        </div>
    </div>

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'); }
 });
});

https://jsfiddle.net/6k9ptg06/ - 这是我网站上的确切代码，当我点击按钮时没有任何反应。

Answer 1

JsFiddle https://jsfiddle.net/harshdand/k6488t60/

将您的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);
}

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

1 个答案: