이 jQuery 코드는 어떻게 megamenu를 단순화합니까?

안녕하세요,이 코드를 단순화하려고 노력하고 있지만 어떤 방법으로 어떤 아이디어를 생각할 수 없습니까? 그 효과적으로 메가 메가이 jQuery 코드는 어떻게 megamenu를 단순화합니까?

$(function() { 
    $('#globalnavigation').find("a").bind({ 
     click: function() { 
      if (".submenu:hidden") { 
       $(".submenu").css("display", "block"); 
      } 
      if ($('a[href$="#a-menu"]')) { 
       $(this).addClass("active"); 
       $("#services-menu").css("display", "none"); 
       $("#innovations-menu").css("display", "none"); 
       $("#insights-menu").css("display", "none"); 
       $("#professionals-menu").fadeIn(750); 
      } 
      if ($('a[href$="#b-menu"]')) { 
       $(this).addClass("active"); 
       $("#professionals-menu").css("display", "none"); 
       $("#innovations-menu").css("display", "none"); 
       $("#insights-menu").css("display", "none"); 
       $("#services-menu").fadeIn(750); 
      } 
      if ($('a[href$="#c-menu"]')) { 
       $(this).addClass("active"); 
       $("#services-menu").css("display", "none"); 
       $("#innovations-menu").css("display", "none"); 
       $("#professionals-menu").css("display", "none"); 
       $("#insights-menu").fadeIn(750); 
      } 
      if ($('a[href$="#d-menu"]')) { 
       $(this).addClass("active"); 
       $("#services-menu").css("display", "none"); 
       $("#professionals-menu").css("display", "none"); 
       $("#insights-menu").css("display", "none"); 
       $("#innovations-menu").fadeIn(750); 
      } 
     } 
    }); 
});

출처

2011-05-11 ivordesign

html을 표시 할 수 있습니까? 살아있는 예? –

HTML은 어디에 있습니까? 또한,이 무언가를 위해 [jsFiddle] (http://jsfiddle.net/)을 사용하여 코드를 공유하는 것을 고려하십시오. 다른 사람들이 당신이하려고하는 것을 쉽게 비판 할 수 있습니다. – eykanal

@ivodesign 코드도 들여 쓰기를 고려해 볼 수 있습니다 – Teneff

는 CSS :

이

.submenu-content 
{ 
    display: none; 
}

HTML :

이

<nav id="globalnavigation">   
    <ul> 
     <li><a id="menu-item-a" href="#professionals-menu">Professionals</a></li> 
     <li><a id="menu-item-b" href="#services-menu">Services</a></li> 
     <li><a id="menu-item-c" href="#insights-menu">Insights</a></li> 
     <li><a id="menu-item-d" href="#innovation-menu">Innovation</a></li> 
    </ul> 
</nav> 

<section class="submenu" style="display: block;"> 
    ... 
    <div class="submenu-content" id="submenu-content-a"> 
    <div class="submenu-content" id="submenu-content-b"> 
    <div class="submenu-content" id="submenu-content-c"> 
    <div class="submenu-content" id="submenu-content-d"> 
    ... 
</section>

자바 스크립트 :

$('#globalnavigation').find("a").click(function() { 
     $(this).addClass("active");   
     $('.submenu').show(); 
     $('.submenu-content').hide(); 

     var id = $(this).attr('id').replace('menu-item-', ''); 
     $('#submenu-content-' + id).fadeIn(750); 
    });

출처

2011-05-11 13:21:41 Kon

질문을 바꾸게합니다. 어떻게 코드를보다 효율적으로 만들 수 있습니까? 확대에서 당신이 말할 것 같아요 ... 내가 클릭 한 글로벌 메뉴의 모든 링크 들어, 관련 하위 메뉴를 표시합니다. 하지만 다른 하위 메뉴가 이미 숨겨져 있습니다. 말이 돼? – ivordesign

코드를 업데이트했습니다. 하위 메뉴가 여러 개있는 경우 클래스 이름을 기준으로 모든 하위 항목을 숨기고 원하는대로 표시 할 수 있습니다. 이것은 의사 코드이지만 올바른 방향으로 가야합니다. – Kon

그 반응이 어리석게 빨랐다. 거의 정확히 내가 원했던 것, 고맙다 Kon, 너 천재 야! – ivordesign

당신의 CSS를 통합 할 수 있습니다 당신과 함께 시작하는이

를 호출

$("#a-menu,#b-menu,#c-menu").css("display", "none"); 
$("#d-menu").fadeIn(750);

출처

2011-05-11 13:23:45 mcgrailm

이와 비슷한?

formatMenus('a[href$="#a-menu"]'); 
formatMenus('a[href$="#b-menu"]'); 

function formatMenus(selector) 
{    
    if ($(selector)) 
    { 
     $(this).addClass("active"); 
     $("#services-menu").css("display", "none"); 
     $("#innovations-menu").css("display", "none"); 
     $("#insights-menu").css("display", "none"); 
     $("#professionals-menu").fadeIn(750); 
    } 
}

출처

2011-05-11 13:24:42

이 jQuery 코드는 어떻게 megamenu를 단순화합니까?

답변

관련 문제