jQuery Navigation Menu Toggling

Question

Drupal에서 jQuery를 사용하여 메가 메뉴를 만드는 중입니다.하지만 약간의 문제가 있습니다. jQuery로 작업하는 것이 부족하다는 생각이 들며, 아마도 여러분 모두가 나를 도울 수 있습니다. .

사용자가 탐색 메뉴의 일부를 클릭하면 해당 메뉴 콘텐츠를 모두 표시하고 다른 메뉴 콘텐츠는 표시하지 않기를 원하지만 사용자가 다시 클릭하면 아래 메뉴가 축소됩니다. 아무것도 보여주지 마라. 나는 내가 현재 가지고 있기 때문에 나는 꽤 가까이에 있다고 느낀다. 왜냐하면 내가 메뉴를 클릭하면 그 내용과 다른 것들을 보여줄 것이지만, 내 문제는 내가 링크 중 하나를 클릭하면 다른 하나를 클릭하면 새 메뉴로 돌아가서 그 메뉴를 두 번 클릭해야 다른 링크를 표시 할 수 있습니다.

나는 이것이 토글 기능 때문이라고 생각하지만, 여기서 내가 어디로 가야하는지에 관해서는 다소 난처한 입장이다. 아무도 나 한테 아이디어가 없니?

function hideAll() 
{ 
    $(".mega-menu-wrap").hide(); 
      $('.col1').hide(); 
    $(".col2").hide(); 
    $('.col3').hide(); 
    $('.col4').hide(); 
    $('.col5').hide(); 
} 
function showCol1() 
{ 
    $(".mega-menu-wrap").show(); 
    $('.col1').show(); 
    $(".col2").hide(); 
    $('.col3').hide(); 
    $('.col4').hide(); 
    $('.col5').hide(); 
} 
function showCol2() 
{ 
    $(".mega-menu-wrap").show(); 
    $('.col1').hide(); 
    $(".col2").show(); 
    $('.col3').hide(); 
    $('.col4').hide(); 
    $('.col5').hide(); 
} 
function showCol3() 
{ 
    $(".mega-menu-wrap").show(); 
    $('.col1').hide(); 
    $(".col2").hide(); 
    $('.col3').show(); 
    $('.col4').hide(); 
    $('.col5').hide(); 
} 
function showCol4() 
{ 
    $(".mega-menu-wrap").show(); 
    $('.col1').hide(); 
    $(".col2").hide(); 
    $('.col3').hide(); 
    $('.col4').show(); 
    $('.col5').hide(); 
} 
function showCol5() 
{ 
    $(".mega-menu-wrap").show(); 
    $('.col1').hide(); 
    $(".col2").hide(); 
    $('.col3').hide(); 
    $('.col4').hide(); 
    $('.col5').show(); 
} 

$(".col-menu1").slideToggle(
    showCol1, 
    hideAll 
); 

$(".col-menu2").toggle(
    showCol2, 
    hideAll 
); 

$(".col-menu3").toggle(
    showCol3, 
    hideAll 
); 

$(".col-menu4").toggle(
    showCol4, 
    hideAll 
); 

$(".col-menu5").toggle(
    showCol5, 
    hideAll 
); 

나는 또한 document.ready에 숨어 모든 것을 가지고 : 여기 내 jQuery를합니다. 나는 그것이 중요하다고 생각하지 않았습니다. 어떤 도움이라도 대단히 감사 할 것입니다. 감사!

--- 편집 --- 여기

더 나은 모든 것이 엉망 조금 방법을 보여 할 수있는 jsfiddle입니다. 헤더를 가지고 놀면 방금 내가 말한 것을 볼 수 있습니다.

http://jsfiddle.net/n5G8j/

Answer 1

나는 당신의 문제에이 해결책을 가지고 있습니다. 나는 이것을 어떻게 성취했는지에 대한 아이디어를주기 위해 논평하려고 노력할 것입니다.

http://jsfiddle.net/the_dow/E453a/5/

아무것도 불분명 한 경우 알려 주시기 바랍니다 :

<script> 
$(function() { 

    // Start off with everything hidden 

    $(".col").hide(); 
    $(".mega-menu-wrap").hide(); 

    // Function that is excecuted on click of .col-menu 

    $(document).on("click", ".col-menu", function() { 

     // Hide everything again. 

     $(".col").hide(); 
     $(".mega-menu-wrap").hide(); 

     // Find the value of which content item to display 

     var id = $(this).attr('menu-id'); 

     // If a menu link is clicked on it will be given a class of active (see last line of else {}) 
     // That is to determine whether or not a piece of menu content is visible or not 

     if ($(this).hasClass("active")) { 

      // If the link is active, just hide the content and remove the class 
      $(".mega-menu-wrap").hide(); 
      $(".col" + id).hide(); 
      $(this).removeClass("active") 

     } else { 

      // Else remove all active classes and show the new content 
      $(".active").removeClass("active"); 
      $(".mega-menu-wrap").show(); 
      $(".col" + id).show(); 
      $(this).addClass("active"); 

     } 
    }); 
}); 
</script> 

여기에 작업 jsFiddle 찾기 (나는 약간의 PHP 태그 누락 이미지를 청소).