메뉴 옵션이 전환됩니까?

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의 강력한 선택자 사용하기 및 각 메뉴 항목에 대한 별도의 기능 대신 연결. 도

$('#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); 

단순화 조금을 jQuery를 당신의 CSS에 한 번 더 규칙 추가 : 여기

활성 메뉴 항목을 지정 addClass 및 removeClass를 사용하여 일부 수정 된 코드의

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

그리고 여기에 바이올린이 있습니다. http://jsfiddle.net/zBuZT/

(첫 번째 메뉴 항목의 클릭 이벤트는 페이지로드시 트리거되며 n os. 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/