Question

我有一个简单的下拉菜单，它由一个三角形（插入符号）符号打开。我需要在菜单打开时将插入符号上下颠倒（180度），然后在关闭时返回默认位置。理想的做法是在没有使用css类的情况下实现这一目标，这是最常见的解决方案，当我在寻找答案时。

我试图在点击时使用三元运算符，如下所示：

    $(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)');

但它不起作用;它旋转一次 - 颠倒 - 但下次点击时不会回到默认位置。我也试过'旋转（0度）'和'旋转（360度）'，效果相同（实际上没有效果）。我应该使用什么声明？

Answer 1

尝试像这里的答案jQuery toggle CSS?使用Jquery切换。虽然我不确定你为什么要避免使用CSS类，但这会让它变得非常容易。

Answer 2

css（＆＃39; transform＆＃39;）拥有自己的时间表。第一次跑，它到达时间轴的末尾。你不能指望它再次重启时间表。

我发现的是，你可以......＆＃34;相当hacky＆＃34;，在声明中添加超时。当超时启动时（偶数计时器为0ms），css将刷新并再次对css属性进行第二次更改。

这就是为什么人们在JS中添加css类的原因。因为当你添加或删除一个css类时。您只需强制浏览器重新渲染，因此该css属性的时间轴已重置。

Answer 3

如documentation中所述，转换属性的值不是旋转... 。

因为您只需要在旋转之间切换，您可以从以下位置更改测试：

$(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)');

为：

$(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(20deg)' : 'none');

一个例子：

$('p').on('click', function(e) {
    console.log($(this).css('transform'));
    $(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(180deg)' : 'none');
})

p {
    border: solid red;
    margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>Transformed element</p>

使用jQuery向上或向下旋转

3 个答案: