jQuery Navigation Menu Toggling

Question

Я работаю над созданием Mega-меню с jQuery в 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. Я просто не думал, что это важно показать. Любая помощь приветствуется. Благодаря!

--- EDIT ---

Вот jsfiddle лучше показать, как все немного перепутались. Если вы просто поиграете с заголовком, вы увидите, о чем я говорю.

http://jsfiddle.net/n5G8j/

Answer 1

У меня есть это решение вашей проблемы. Я попытаюсь прокомментировать, чтобы дать вам представление о том, как я это достиг.

<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-теги и отсутствующие изображения):

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

Не стесняйтесь, дайте мне знать, если что-то неясно.