0

我正在努力在 Drupal 中使用 jQuery 创建一个 Mega Menu，但我遇到了一些麻烦，我相信这是由于我缺乏使用 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/

4

1 回答 1

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/

如果有任何不清楚的地方，请随时告诉我。

于 2013-12-19T16:40:44.310 回答