1

我遇到了垂直菜单的问题，它是悬停动作。我的客户要求悬停颜色从一组 5 种颜色中依次更改。

我的问题的一个例子就在这个小提琴（和下面）中，我的脚本在很大程度上受到了之前一个名为Keep :hover color on mouse click via Jquery的stackoverflow问题的影响。

我想要发生的是，每次悬停时，颜色都会通过数组发生变化。一旦用户单击其中一个链接，该链接将更改为显示其悬停颜色（如活动状态），但仅在单击另一个链接之前，该链接将成为其自己的颜色（切换活动状态到新链接）。如果活动颜色与悬停颜色相同，那就太好了，但这不是必需的。

HTML 和 CSS 都是标准的，我的脚本如下：

    jQuery(document).ready(function($) {

    var colors = ["#737b35","#f57b20","#cbb778","#717174","#3a6f8f"];  

    $("#menu-sidebar-menu li a").each(function(i){

        $(this).click(function() {
            $("#menu-sidebar-menu li a").each(function(i,elem) { // clear the style first
                 $(elem).removeClass("clicked");
           });//so only ONE element is coloured SELECTED
           $(this).addClass("clicked");//add the "selected" colour
        });

        $(this).hover(
            function() {
                if(!$(this).hasClass("clicked")) {
        $("#menu-sidebar-menu li a").css('background', '');
                    $(this).css('background', colors[i % colors.length]);
                }
            }, 
            function(){
                if(!$(this).hasClass("clicked")) {
                    $(this).css('background', '');
                } 
            }
        );

    });

    });

正如我现在所拥有的，悬停动作是完美的。但是，一旦单击 2 个或更多链接，背景颜色就会保留，并且不会按照我需要的方式从链接切换到链接。

我正在尝试掌握 jQuery，但我没有人可以问愚蠢的问题，所以我非常感谢任何和所有的帮助！

4

1 回答 1

3 
  $("#menu-sidebar-menu li a")
    .click(function () {
      $("#menu-sidebar-menu li a").removeClass("clicked").not(this).css('background', '');
      $(this).addClass("clicked");
    })
    .hover(
      function () {
        if (!$(this).hasClass("clicked"))
          $(this).css('background', colors[$(this).index("#menu-sidebar-menu li a") % colors.length]);
      },
      function () {
        if (!$(this).hasClass("clicked"))
          $(this).css('background', '');
      }
    );

演示

于 2013-01-15T18:28:26.407 回答