jQuery导航菜单切换

Question

我正在用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上隐藏了一切。我只是不认为这很重要。任何帮助都将不胜感激。谢谢!

--编辑--

下面是更好地向大家展示一切都有点儿混乱的小把戏。如果你只是玩头球，你会看到我在说什么。

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标记和丢失的图像)：

dow/E453a/5/

如果有什么不清楚的话，请随时通知我。