Переключение навигационного меню jQuery

Question

Переключение навигационного меню jQuery

0

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

---РЕДАКТИРОВАТЬ---

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

http://jsfiddle.net/n5G8j/

scapegoat17 19 дек. 2013, в 15:59

Источник

Теги:

jquery

html

drupal

drupal-7

megamenu

1 ответ

Ещё вопросы

the_dow · Accepted Answer · 2013-12-19T15-32-00.000Z

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

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

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

это определенно делает это. Я должен буду рассмотреть это ближе позже, но вы определенно помогли. Спасибо!