Question

我想让文字（导航）在悬停时旋转45度。单击/选择文本时，我希望文本保持在该位置。当用户单击其他导航时，将删除兄弟姐妹类并将其旋转回0deg。任何人都可以提供解决方案吗？

<script type="text/javascript"> $(document).ready(function(){ $(".nav li a").click(function(){ $(this).toggleClass("active"); $(this).siblings().removeClass("active");}); }); </script>

HTML：

<nav class="desktop"> <ul id="nav" class="nav"> <li><a href="#about" title="Next Section">ABOUT</a></li> <li><a href="#services" title="Next Section">SERVICES</a></li> <li><a href="#homepage" title="Next Section"><img src="images/logo.png"></a></li> <li><a href="#works" title="Next Section">WORKS</a></li> <li><a href="#contact" title="Next Section">CONTACT</a></li> </ul> </nav>

.desktop #nav li
{
display:inline-block;
width:150px;
font-size:120%;
-webkit-transition:-webkit-transform 0.5s;  For Safari 3.1 to 6.0 
transition:transform 0.5s;
}

.desktop #nav li:hover, .active
{
display:inline-block;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}`

Answer 1

将CSS更改为：

.desktop #nav li {
    display:inline-block;
    width:150px;
    cursor:pointer
}

.desktop #nav li a{
    display:inline-block;
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transition: transform 0.3s ease 0s;
    -webkit-transition: transform 0.3s ease 0s;
    -moz-transition: transform 0.3s ease 0s;
    -o-transition: transform 0.3s ease 0s;
} 

.desktop #nav li:hover a, .desktop #nav li.active a{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

和jQuery代码：

$(document).ready(function(){ 
    $(".nav li").click(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    }); 
});

代码的问题是，当您将鼠标悬停在<li>标记时，它会旋转到45度，因此它将移出光标区域。因此，悬停事件将被触发，<li>标记将再次旋转为0deg。它再次出现在光标区域，这是永远的！

在这里，您可以轮换<a>代码而不是<li>代码，它可以完成工作。

工作演示： http://jsfiddle.net/VQ2x2/7/

Answer 2

问题是你的Javascript部分：

$(this).siblings().removeClass("active");

您想要访问列表的子元素。 $（this）是你点击的锚标签，因此这个li元素中没有兄弟姐妹。

试试这个：

$(this).parent().siblings().each(function () {
        $(this).children().removeClass("active");
    });
})

这将获取父列表元素，然后迭代其他li的子元素以删除活动类。

我将您的代码粘贴到JSFiddle中 - 它非常丑陋且样式不正确，但您可以看到javascript有效。

编辑：90°的问题在于您将CSS过渡应用于li元素。这就是为什么悬停你的li元素是旋转的，点击内部的锚也在旋转。

更好的方法是将活动类放在list元素上，这样你就不必更改css上的任何内容，因为点击会阻止悬停工作。

见这里：Updated fiddle

$(document).ready(function () {
$(".nav li").click(function () {
    $(this).toggleClass("active");
    $(this).siblings().removeClass("active");
})

}）;

Answer 3

我认为你的代码错了。代码应该是这样的：

$(document).ready(function(){
   $(".nav li a").click(function(){
      $(this).toggleClass("active");
      $(this).parent().siblings().find("a").removeClass("active");
   });
});

OR

你也可以试试这个：

$(document).ready(function(){
   $(".nav li a").click(function(){
      $(this).parent().parent().find("a").removeClass("active");  //It will remove active class from all anchor elements.
      $(this).toggleClass("active");
   });
});

悬停在导航上时旋转，单击时保持停留状态。单击其他导航时，兄弟姐妹会旋转回原始位置

3 个答案: