0

第一个帖子，第一个问题。

我是 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();

小提琴

佩德罗

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

4

2 回答 2

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 的上下文中。）

于 2013-04-01T17:58:19.190 回答
0

尝试使用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像这样按属性值进行选择：

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

但是我更喜欢：

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

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

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

于 2013-04-01T16:22:51.360 回答