Question

我在图标旋转方面遇到问题。有4个<a>元素，有4个图标。点击任何<a>元素图标时，旋转并显示框。之后，当点击任何其他<a>元素时，最后一个框将折叠，最后一个图标的旋转将返回到其原始位置。但问题是，当我点击<a>元素并立即再次点击相同的<a>元素时，图标不会旋转回原来的位置。

$icon = $('.icon');
$elem = $('.box');

    $('.link').click(function () {

        $elem.stop().slideUp();
        //reset icon states when box is collapse
        $icon.removeClass('rotateClass');
        //Rotate current icon
        $('.icon', this).toggleClass('rotateClass');
        $(this).next().stop().slideToggle();

    });

 a:hover {
            cursor: pointer;
}

.icon {
            width: 17px;
            height: 17px;
            margin-left: 8px;
            transition: transform .25s ease-in;
}

.rotateClass {
            transform: rotate(-180deg);
}

.box {
            background-color: #FFF7E5;
            display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div class="wrapper">

    <a class="link">
        <p>Link 1<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 1
    </div>

    <a class="link">
        <p>Link 2<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 2
    </div>

    <a class="link">
        <p>Link 3<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 3
    </div>

    <a class="link">
        <p>Link 4<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 4
    </div>

</div>
</body>
</html>

Answer 1

$icon = $('.icon');
$elem = $('.box');
lastClicked = null;

    $('.link').click(function () {
        $elem.stop().slideUp();
        //reset icon states when box is collapse
        $icon.removeClass('rotateClass');
        //Rotate current icon
        if(lastClicked !== this){
         $('.icon', this).toggleClass('rotateClass');
         lastClicked = this;
        }
        else{
        lastClicked = null;
        }
        $(this).next().stop().slideToggle();
        
        

    });

a:hover {
            cursor: pointer;
}

.icon {
            width: 17px;
            height: 17px;
            margin-left: 8px;
            transition: transform .25s ease-in;
}

.rotateClass {
            transform: rotate(-180deg);
}

.box {
            background-color: #FFF7E5;
            display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div class="wrapper">

    <a class="link">
        <p>Link 1<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 1
    </div>

    <a class="link">
        <p>Link 2<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 2
    </div>

    <a class="link">
        <p>Link 3<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 3
    </div>

    <a class="link">
        <p>Link 4<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 4
    </div>

</div>
</body>
</html>

试试这个，我保存了最后点击的元素，如果再次按下它，它会重置并且不会旋转

Answer 2

您可以将此行$icon.removeClass('rotateClass');更改为$icon.not($(this).find('.icon')).removeClass('rotateClass');

＆＃13;

$icon = $('.icon');
$elem = $('.box');

    $('.link').click(function () {

        $elem.stop().slideUp();
        //reset icon states when box is collapse
        $icon.not($(this).find('.icon')).removeClass('rotateClass');
        //Rotate current icon
        $('.icon', this).toggleClass('rotateClass');
        $(this).next().stop().slideToggle();

    });

＆＃13;

 a:hover {
            cursor: pointer;
}

.icon {
            width: 17px;
            height: 17px;
            margin-left: 8px;
            transition: transform .25s ease-in;
}

.rotateClass {
            transform: rotate(-180deg);
}

.box {
            background-color: #FFF7E5;
            display: none;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div class="wrapper">

    <a class="link">
        <p>Link 1<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 1
    </div>

    <a class="link">
        <p>Link 2<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 2
    </div>

    <a class="link">
        <p>Link 3<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 3
    </div>

    <a class="link">
        <p>Link 4<img class="icon" src="http://i.imgur.com/WypRrlb.png"></p>
    </a>
    <div class="box">
        Dummy Text 4
    </div>

</div>
</body>
</html>

＆＃13;

图标无法正确旋转

2 个答案: