将鼠标悬停在导航上时旋转并在单击时停留。单击其他导航时，兄弟姐妹旋转回原始位置答案

【问题标题】：Rotate when hover on navigation and stay when clicked. When clicked on other navigation, siblings rotate back to original position将鼠标悬停在导航上时旋转并在单击时停留。单击其他导航时，兄弟姐妹旋转回原始位置
【发布时间】：2014-04-23 09:50:57
【问题描述】：

我想让文本（导航）在悬停时旋转 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);
}`

【问题讨论】：

目前的解决方案有什么问题？
首先，悬停时旋转45度。单击时，它将再旋转 45 度，这意味着 90 度，然后它会回到 45 度并保持不变。兄弟姐妹也不行。另一个列表不会回到 0deg。如果有人可以帮助我将不胜感激......真的卡住了！
我怀疑 CSS3 需要稍微调整一下，你能创建一个 jsfiddle，看看它。 jsfiddle.net
给你：jsfiddle.net/rezasan/vSJCw
这是你想要的吗？ jsfiddle.net/dreamweiver/vSJCw/6/

标签： jquery html navigation rotation hover

【解决方案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> 标签将再次旋转到 0 度。它再次出现在光标区域，并且永远存在！

在这里您可以旋转<a> 标签而不是<li> 标签，它会完成这项工作。

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

【讨论】：

你的小提琴根本不适合我。没有悬停和点击效果 - 你在 js 上的方法是正确的
@gulty ：我忘记为转换属性添加供应商特定的前缀。更新的小提琴：jsfiddle.net/VQ2x2/2
嘿，它以某种方式起作用。但是当另一个导航类被删除时，它不会旋转（动画）。它只是旋转45度。没有过渡。嗯..
@RezaSan : 更新了小提琴链接和答案:)
谢谢。只是最后一个问题。如果假设我单击了关于，它将旋转 45 度。当我再次单击关于时，它将旋转回 0 度。有什么办法可以防止吗？只有当我单击其他导航时，About 才能返回 0 度。其他链接也一样。很抱歉打扰您。

【解决方案2】：

问题在于您的 Javascript 部分：

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

您想访问列表的子元素。 $(this) 是您单击的锚标记，因此此 li 元素内没有兄弟姐妹。

试试这个：

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

这会获取父列表元素，然后遍历其他 li 的子元素以删除活动类。

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

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

我的一个更好的方法是将活动类放在列表元素上，这样您就不必更改 css 上的任何内容，因为单击会阻止悬停工作。

请看这里：Updated fiddle

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

});

【讨论】：

最佳答案！非常感谢！呸。我现在可以离开办公室了。

【解决方案3】：

我认为您的代码有误。代码应该是这样的：

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

或

你也可以试试这个：

$(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");
   });
});

【讨论】：