Question

我有一个下拉列表，希望单击该列表时人字形旋转。目前，这适用于Codepen。但是，当我将其转移到我正在工作的网站时，人字形将不会移动。测试和解决此问题的最佳方法是什么？

我尝试删除所有其他jquery和冲突的jquery库。

https://codepen.io/ryannewell/pen/gNrEPd

<!DOCTYPE html>
<html>
    <head>

 <title>Chevron</title>
 <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/all.js"></script>
 <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/v4-shims.js"></script>

    <style>
    .rotate {
        -moz-transition: all 0.1s linear;
        -webkit-transition: all 0.1s linear;
        transition: all 0.2s linear;
        color: #fff;
    }

    .rotate.down {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .side {
        background-color: grey;
    }
    </style>
    </head>

<body>

    <div class="side">
    <li>
        <a href="#ContactSubmenu" data-toggle="collapse" class="accordion">
        <i class="fas fa-envelope-square"></i>Contact Links<i class="fas fa-angle-down rotate"></i></a>
        <ul class="collapse list-unstyled leftalign accordion-desc">
        <li>
            <a>
            Dropdown list
            </a>
        </li>
        </ul>
    </li>
    </div>

    <script>
    $(document).ready(function() {
        $(".accordion-desc").fadeOut(0);
        $(".accordion").click(function() {
          $(".accordion-desc").not($(this).next()).slideUp('fast');
          $(this).next().slideToggle(400);
        });
      });

      $(".accordion").click(function() {
        $(".accordion").not(this).find(".rotate").removeClass("down");
        $(this).find(".rotate").toggleClass("down");
      });
    </script>

</body>
</html>

期望V形在点击链接时旋转，但事实并非如此。仅适用于Codepen。

Answer 1

不确定在您的实际代码（不是CodePen）中是否复制并粘贴的内容完全相同，但是在示例代码中，CSS和JavaScript不在样式或脚本标记之内。

下拉V形不旋转

1 个答案: