Question

所以我有一个常见的问题。一切都运行得很好，除了我想点击特定列表元素时离子图标旋转90度。这是我拥有的6个HTML块之一

<li class = "q"><i class = "ion-arrow-down-a"></i> Lorem ipsum dolor sit amet,kdfssdfksdfkdfskfsdkfdskfdskkfdskfdskdsf</li>

 <li class = "a">blahfshfshbshhaj JFDSJSDFJFSDJFSDJFSDJFJDSJFSDJFSDJFDJFDJFSDJ</li>

我还有6个以上。现在我的jQuery就是真正的问题所在。直到slideUp();部分的所有内容都正常工作。但离子图标根本不旋转。

var action = "click";
var speed = 500;

$(document).ready(function(){
    $('li.q').on(action,function(){
        $(this).next()
            .slideToggle(speed).
            siblings('li.a').
        slideUp();
    var i = $(this).children('i');
    $('i').not(i).removeClass('rotate');
    i.toggleClass('rotate');
    });
});

在我的CSS中我也做了一个旋转类

.rotate
{
    transform:rotate(90deg);
}

感谢任何帮助

Answer 1

原因

与其他答案中最初提到的内容相反，问题是 不是因为该类已添加到 i元素中。取而代之的是 ，因为元素的 display 设置。

CSS transform 不适用于内联元素 。它们仅适用于显示为块，内联块，内联表等的元素。以下是W3C Spec的摘录：

可转换元素

可转换元素是以下类别之一的元素：


一个元素，其布局由CSS box模型控制，该模型是块级或原子内联级元素，或者其display属性计算为table-row，table-row-group，table-header-group， table-footer-group，table-cell或table-caption [CSS21]

SVG名称空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform [SVG11]。


原子内联级元素

非内联框的内联级框（例如替换的内联级元素，内联块元素和内联表元素）称为原子内联级框

默认 大多数浏览器将 i 元素设置为 display: inline。因此，当transform应用于它（通过rotate类）时，它根本没有效果。也就是说，元素不会旋转（因此，伪元素也保持不旋转）。

当您直接将transform设置为rotate:before时，它会有效，因为大多数浏览器都将所有伪元素的display设置为inline-block。

解决方案

更改 display i 元素 inline-block。这意味着旋转变换实际上会产生影响。

当你向一个元素添加transform时，它的所有子元素（包括伪元素）都会受到变换的影响，所以不需要将类设置为伪元素。

var action = "click";
var speed = 500;

$(document).ready(function() {
  $('li.q').on(action, function() {
    $(this).next()
      .slideToggle(speed).
    siblings('li.a').
    slideUp();
    var i = $(this).children('i');
    $('i').not(i).removeClass('rotate');
    i.toggleClass('rotate');
  });
});

.rotate {
  transform: rotate(90deg);
}

/* add this setting */

i {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="q"><i class="ion-arrow-down-a"></i> Lorem ipsum dolor sit amet,kdfssdfksdfkdfskfsdkfdskfdskkfdskfdskdsf</li>

<li class="a">blahfshfshbshhaj JFDSJSDFJFSDJFSDJFSDJFJDSJFSDJFSDJFDJFDJFSDJ</li>

Answer 2

正如Harry在his answer中提到的那样，主要原因是i元素的显示设置。将变换添加到伪元素是另一种选择。

如果您查看ionicons.css ion-arrow-down-a类的css是：

.ion-arrow-down-a:before { content: "\f103"; }

::之前创建一个伪元素，它是匹配元素的第一个子元素。伪元素被添加到选择器，但它们不是描述特殊状态，而是允许您设置文档的某些部分的样式。例如，:: first-line伪元素仅定位选择器指定的元素的第一行。因此，根据ionicon.css，你可以使用：之前的类名进行转换。

你可以像这样改变你的课程：

.rotate:before
{
   transform:rotate(90deg);
}

或添加此css样式：

i {
   display: inline-block;
}

工作samlple HERE

旋转箭头问题

2 个答案:

原因

解决方案