1

垂直メニューに問題があり、ホバー アクションです。私のクライアントは、ホバーの色を 5 色のセットから順番に変更することを要求しています。

私の問題の例はこのフィドル(および以下) にあり、私のスクリプトはKeep :hover color on mouse click via Jqueryと呼ばれる以前のスタックオーバーフローの質問の影響を大きく受けています。

私がやりたいことは、ホバーするたびに、配列を介して色が変わることです。ユーザーがリンクの 1 つをクリックすると、そのリンクは (アクティブな状態のように) ホバー カラーを表示するように変更されますが、別のリンクがクリックされるまで、そのリンクは独自の色になります (アクティブな状態の切り替え)。新しいリンクへ）。アクティブな色がホバーの色と同じであれば最高ですが、必須ではありません。

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 に答える