Question

我正在使用Drupal中的jQuery创建一个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上。我只是觉得展示不重要。任何帮助将非常感激。谢谢！

--- --- 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/

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

jQuery导航菜单切换

1 个答案: