Question

我在下面的js中添加了代码。单击“注册”或“登录”时，箭头会向上/向上移动，但当您再次关闭它时，它会保持这种状态。有人可以帮我解决该怎么做。

我尝试使用这篇文章，但无法使这项工作成为here

这是我使用的Jquery脚本

$(document).ready(function () {
        $('#login-trigger').click(function () {
            $('#login-content').slideToggle();
            $(this).addClass('active');
            if ($(this).hasClass('active')) $(this).find('span').html('&#x25b2;');

            $('#signup-content').slideUp();
        })
        $('#signup-trigger').click(function () {
            $('#login-content').slideUp();
            $(this).addClass('active');
            if ($(this).hasClass('active')) $(this).find('span').html('&#x25b2;');

            $('#signup-content').slideToggle();
        });
    });

这是我的jsfiddle，（我知道有些人不会使用jffiddle，但是因为我有很多代码，所以用它来展示我正在尝试做的事情会更容易）< / p>

Answer 1

问题，因为您要在点击事件中添加活动的类..然后，您正在检查它是否有活动的类（始终为真）...

使用toggleClass（切换提到的类）而不是addClass并使用hasClass

进行检查

 $(document).ready(function () {
    $('#login-trigger').click(function () {
         $('#login-content').slideToggle();
         $(this).toggleClass('active');
         if ($(this).hasClass('active')){              
             $(this).find('span').html('&#x25b2;');
        }else{
           $(this).find('span').html('&#x25BC;'); 

        }
        $('#signup-content').slideUp();
     });
    .... //same for signup

fiddle here

和是I know some people don't pref jsfiddle ..我猜你错了，我相信大多数人更喜欢jsfiddle而不是代码本身，因为它更容易在小提琴中测试。

Answer 2

你错过了其他部分。

尝试：

$(this).toggleClass('active');
if ($(this).hasClass('active')){
    $(this).find('span').html('&#x25b2;');
}
else{
    $(this).find('span').html('&#x25b0;');//code of down arrow
}

Fiddle here.

Answer 3

您永远不会删除活动的类，因此在第一次单击后，它看起来始终处于活动状态，并且您也不会在第一次单击后更改三角形形状。

此代码适用于登录：

$('#login-trigger').click(function () {
        $('#login-content').slideToggle();


        if (!$(this).hasClass('active')) { //Now is not active, I'll make it active
            $(this).addClass('active');    //Add class
            $(this).find('span').html('&#x25b2;');  //BLACK UP-POINTING TRIANGLE
        } else { //Now is active, I'll make it not active
            $(this).removeClass('active');  //Remove class
            $(this).find('span').html('&#x25BC;');  //BLACK DOWN-POINTING TRIANGLE
        }

       $('#signup-content').slideUp();
    })

这是jsfiddle link。

无法使if else jquery语句有效

3 个答案: