Question

第一篇文章，第一个问题。

我是一名jQuery初学者，所以请耐心等待。我有一个菜单有3个选项。我需要代码来切换它们 - 当一个选项处于活动状态/激活时，另一个处于非活动/停用状态（停用时，运行相应的* _deactivate（）函数）。为了得到一个整洁的菜单，我创建了输入/输出动画。我已经检查过一些帖子，但无法将解决方案应用到我的问题中。

菜单代码：

// Menu button "A Empresa" mouse events ├───────────────────────────────────────────────────────────────────┤

  $('#aEmpresa').on('mouseenter', function(){
    $(this).css({'cursor':'pointer'});
    $("#aEmpresa p").animate({'color':'#EF7F1A'}, 150);
    $("#aEmpresa_underline").animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
  });

  $('#aEmpresa').on('mouseleave', function(){
    $("#aEmpresa p").animate({'color':'#C5C6C6'}, 150);
    $("#aEmpresa_underline").stop(true).animate({'background-position-x':'0px', 'background-position-y':'0px'}, 150);
  });

  $('#aEmpresa').on('click', function(){
    $("#aEmpresa p").animate({'color':'#000000'}, 150);
    $("#aEmpresa p").css({'font-weight':'bold'}, 150);
    $('#aEmpresa_underline').animate({'background-position-x':'0px', 'background-position-y':'-22px'}, 150);
    $(this).unbind('mouseenter mouseleave');
    $(this).css({'cursor':'default'});
  });

  function aEmpresa_deactivate(){
    $('#aEmpresa_underline').animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
    $("#aEmpresa p").animate({'color':'#EF7F1A'}, 150,
      function(){
        $('#aEmpresa_underline').animate({'background-position-x':'0px', 'background-position-y':'-22px'}, 150);
        $("#aEmpresa p").animate({'color':'#C5C6C6'}, 150);
        $("#aEmpresa p").css({'font-weight':'normal'}, 150,
          function(){
            $('#aEmpresa').on();
            $(this).css({'cursor':'pointer'});
          }
        );
      }
    );
  }

// Menu button "A Nossa Arte" mouse events ├────────────────────────────────────────────────────────────────┤

  $('#aNossaArte').on('mouseenter', function(){
    $(this).css({'cursor':'pointer'});
    $("#aNossaArte p").animate({'color':'#EF7F1A'}, 150);
    $("#aNossaArte_underline").animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
  });

  $('#aNossaArte').on('mouseleave', function(){
    $("#aNossaArte p").animate({'color':'#C5C6C6'}, 150);
    $("#aNossaArte_underline").stop(true).animate({'background-position-x':'0px', 'background-position-y':'0px'}, 150);
  });

  $('#aNossaArte').on('click', function(){
    $("#aNossaArte p").animate({'color':'#000000'}, 150);
    $("#aNossaArte p").css({'font-weight':'bold'}, 150);
    $('#aNossaArte_underline').animate({'background-position-x':'0px', 'background-position-y':'-22px'}, 150);
    $(this).unbind('mouseenter mouseleave');
    $(this).css({'cursor':'default'});
  });

  function aNossaArte_deactivate(){
    $('#aNossaArte_underline').animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
    $("#aNossaArte p").animate({'color':'#EF7F1A'}, 150,
      function(){
        $('#aEmpresa_underline').animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
        $("#aNossaArte p").animate({'color':'#C5C6C6'}, 150);
        $("#aNossaArte p").css({'font-weight':'normal'}, 150,
          function(){
            $('#aNossaArte').on();
            $(this).css({'cursor':'pointer'});
          }
        );
      }
    );
  }

// Menu button "Contactos" mouse events ├───────────────────────────────────────────────────────────────────┤

  $('#contactos').on('mouseenter', function(){
    $(this).css({'cursor':'pointer'});
    $("#contactos p").animate({'color':'#EF7F1A'}, 150);
    $("#contactos_underline").animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
  });

  $('#contactos').on('mouseleave', function(){
    $("#contactos p").animate({'color':'#C5C6C6'}, 150);
    $("#contactos_underline").stop(true).animate({'background-position-x':'0px', 'background-position-y':'0px'}, 150);
  });

  $('#contactos').on('click', function(){
    $("#contactos p").animate({'color':'#000000'}, 150);
    $("#contactos p").css({'font-weight':'bold'}, 150);
    $('#contactos_underline').animate({'background-position-x':'0px', 'background-position-y':'-22px'}, 150);
    $(this).unbind('mouseenter mouseleave');
    $(this).css({'cursor':'default'});
  });

  function contactos_deactivate(){
    $('#contactos_underline').animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
    $('#contactos p').animate({'color':'#EF7F1A'}, 150,
      function(){
        $('#aEmpresa_underline').animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
        $("#contactos p").animate({'color':'#C5C6C6'}, 150);
        $("#contactos p").css({'font-weight':'normal'}, 150,
          function(){
            $('#contactos').on();
            $(this).css({'cursor':'pointer'});
          }
        );
      }
    );
  }

// Running menu for the first time - aEmpresa ├─────────────────────────────────────────────────────────────┤
function aEmpresa_runFirstTime(){
  $('#aEmpresa_underline').animate({'background-position-x':'0px', 'background-position-y':'-10px'}, 150);
  $("#aEmpresa p").animate({'color':'#EF7F1A'}, 150,
    function(){
      $('#aEmpresa_underline').animate({'background-position-x':'0px', 'background-position-y':'-22px'}, 150);
      $("#aEmpresa p").animate({'color':'#000000'}, 150);
      $("#aEmpresa p").css({'font-weight':'bold'}, 150,
        function(){
          $('#aEmpresa').off();
          $(this).css({'cursor':'default'});
        }
      );
    }
  );
}

// Running first time
aEmpresa_runFirstTime();

Fiddle

佩德罗

P.S。第一次运行时，第一个选项会自动激活。

Answer 1

你应该尝试使用jQuery强大的选择器和链接而不是每个菜单项的单独功能。

以下是一些使用addClass和removeClass指定活动菜单项的修改后的代码：

$('#menu').on('mouseenter', '> div:not(.active)', function () {
    var $this = $(this);
    $this.find('p').animate({
        'color': '#EF7F1A'
    }, 150).find('+ .menuUnderline').animate({
        'background-position-x': '0px',
        'background-position-y': '-10px'
    }, 150);
}).on('mouseleave', '> div:not(.active)', function () {
    var $this = $(this);
    $this.find('p').animate({
        'color': '#C5C6C6'
    }, 150).find('+ .menuUnderline').stop(true).animate({
        'background-position-x': '0px',
        'background-position-y': '0px'
    }, 150);
}).on('click', '> div:not(.active)', function () {
    // deactivate currently active
    $('#menu > div.active').removeClass('active').animate({
        'background-position-x': '0px',
        'background-position-y': '-10px'
    }, 150).find('p').animate({
        'color': '#C5C6C6'
    }, 150).siblings('.menuUnderline').animate({
        'background-position-x': '0px',
        'background-position-y': '0px'
    }, 150);

    // activate clicked item
    $(this).addClass('active').find('p').animate({
        'color': '#000000'
    }, 150).find('+ .menuUnderline').animate({
        'background-position-x': '0px',
        'background-position-y': '-22px'
    }, 150);
});

(function ($) {
    $('#menu + div').click();
})(jQuery);

在CSS中再添加一条规则也简化了jQuery：

#menu > div.active { cursor: default; font-weight: bold; }

这是小提琴：http://jsfiddle.net/zBuZT/

（请注意，第一个菜单项的点击事件将在页面加载时触发，而不是在jsfiddle iframe的上下文中。）

Answer 2

尝试使用jquery data()。

pseudocode:

if first time
{
    initialize first menu option to selected
    change `data-clicked` attribute to `true`
}

if menu_item is clicked
{
    for each item from menu
    {
        check `data-clicked` attribute
        if(true) then set to false
        else set to true
    }
}

您也可以使用简单的css类，但data属性更优雅，但这只是偏好问题。

如果您愿意，也可以选择data atrribute这样的值：

$("[data-clicked='true']");

但我更喜欢：

$(item).data("hidden") === true;

http://api.jquery.com/jQuery.data/

http://api.jquery.com/jQuery.each/

菜单选项切换？

2 个答案: