jQuery导航菜单切换

Question

我正在使用jQuery在Drupal中创建一个Mega菜单，但我遇到了一些麻烦，我相信这是由于我缺少与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。我只是觉得这不重要。任何帮助将非常感激。谢谢！

---编辑---

这里是为了更好地展示如何一切有点搞砸的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/

随时让我知道，如果有不清楚的地方。