Javascript Can'；不要让if-else jquery语句工作

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

我试过用这篇文章，但也没用

下面是我使用的Jquery脚本

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

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

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

---

这是我的（我知道有些人不喜欢使用JSFIDLE，但因为我有很多代码，所以可以更容易地显示我正在使用它做什么）

问题在于，因为您正在向它添加活动类，单击事件。。紧接着，您要检查它是否有一个类处于活动状态（这总是正确的）

使用

toggleClass

（它切换提到的类）而不是

addClass

，并使用

hasClass

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

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

---

是的

我知道有些人不喜欢jsfiddle

。。我猜你错了，我相信大多数人更喜欢JSFIDLE而不是代码本身，因为它更容易在FIDLE中测试。

问题在于，因为你要在单击事件时向它添加活动类。。。紧接着，您要检查它是否有一个类处于活动状态（这总是正确的）

使用

toggleClass

（它切换提到的类）而不是

addClass

，并使用

hasClass

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

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

是的

我知道有些人不喜欢jsfiddle

。。我猜你错了，我相信大多数人更喜欢JSFIDLE而不是代码本身，因为它更容易在FIDLE中测试。

你错过了其他部分

尝试：

您错过了其他部分

尝试：

---

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

此代码应适用于登录：

$('#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('▲');  //BLACK UP-POINTING TRIANGLE
        } else { //Now is active, I'll make it not active
            $(this).removeClass('active');  //Remove class
            $(this).find('span').html('▼');  //BLACK DOWN-POINTING TRIANGLE
        }

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

---

这就是。

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

此代码应适用于登录：

$('#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('▲');  //BLACK UP-POINTING TRIANGLE
        } else { //Now is active, I'll make it not active
            $(this).removeClass('active');  //Remove class
            $(this).find('span').html('▼');  //BLACK DOWN-POINTING TRIANGLE
        }

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

---

这就是。

您缺少的其他部分，请在eleseIt中将其改回向下箭头。现在在JSFIDLE中测试和演示可能会更容易，但StackOverflow可能会比JSFIDLE更有效，然后所有这些问题对未来的访问者都将毫无用处。您可以将大部分代码删去，使之成为演示问题所需的部分。您缺少了其他部分，在eleseIt中将其改回down arrow现在在jsFiddle中测试和演示可能会更容易，但是StackOverflow可能会比jsFiddle更长寿，然后所有这些问题对未来的访问者来说都变得毫无用处。您可以将大部分代码裁剪成实际需要的内容来演示问题。