jQuery: меню появляются / исчезают при клике - V2

Question

V1 этого вопроса можно найти здесь: jQuery: меню появляются / исчезают при нажатии

Разница с первым вопросом заключается в моей структуре HTML. Как только я начал реализовывать мегаменю с помощью CSS, вещи перестали отображаться так, как мне нужно.

Вот основной HTML:

<ul>
 <li><span>Products &amp; Services (1)</span></li>
 <li><span>Support &amp; Training (2)</span></li>
 <li><span>Communities (3)</span></li>
 <li><span>Store (4)</span></li>
</ul>
<div class="megamenu">1111</div>
<div class="megamenu">2222</div>
<div class="megamenu">3333</div>
<div class="megamenu">4444</div> 

Как и в первом меню, это то, что мне нужно:

Мне нужен способ, чтобы каждая ссылка активировала свое собственное мегамену, и каждое мегамену должно закрываться, когда:

1. Пользователь нажимает на другой элемент на панели навигации.
2. Пользователь нажимает на тот же элемент в навигационной панели.
3. Пользователь нажимает на графическую кнопку «Закрыть» (X) внутри мегаменю (для простоты не показано в HTML).

Я знаю, что это очень похоже на работу вкладок, разница в том, что каждый контейнер вкладок может быть закрыт / свернут. Это имеет смысл?

Опять же, я не jQuery / JS (вы можете это видеть), поэтому любая помощь будет чрезвычайно признательна.

Спасибо

Answer 1

Я бы использовал CSS diplay свойство + id атрибут, например:

<script>
    current = "m0"; // div with id="m0" is currently diplayed
    function show_or_hide ( id )
    {
        if ( current ) //if something is displayed
        {   
            document.getElementById ( current ).style.display = "none";
            if ( current == id ) //if <div> is already diplayed
            {                           
                current = 0;
            }
            else
            {
                document.getElementById ( id ).style.display = "block";
                current = id;
            }
        }
        else //if nothing is displayed
        {
            document.getElementById ( id ).style.display = "block";
            current = id;
        }
    }
</script>

<ul>
 <li onclick="show_or_hide('m0')"><span>Products &amp; Services (1)</span></li>
 <li onclick="show_or_hide('m1')"><span>Support &amp; Training (2)</span></li>
 <li onclick="show_or_hide('m2')"><span>Communities (3)</span></li>
 <li onclick="show_or_hide('m3')"><span>Store (4)</span></li>
</ul>
<div class="megamenu" id="m0">1111</div>
<div class="megamenu" id="m1" style="display: none">2222</div>
<div class="megamenu" id="m2" style="display: none">3333</div>
<div class="megamenu" id="m3" style="display: none">4444</div>

Answer 2

Вот ответ на этот вопрос, я не смог найти способ использовать структуру HTML, о которой я упоминал выше:

HTML

<div id="megamenus" class="click-menu">
 <h6>Link 1</h6>
 <div>Content...</div>
 <h6>Link 2</h6>
 <div>Content...</div>
 <h6>Link 3</h6>
 <div>Content...</div>
</div>

JQuery

$(function(){
//Megamenus 
$('.click-menu div').hide();
$('.click-menu h6').click(function(){
    if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $(this).parent().next().slideUp('fast');
  } else {
    $('.click-menu h6').removeClass('selected');
    $(this).addClass('selected');
    $('.click-menu div').slideUp('fast');
    $(this).parent().next().slideDown('fast');
    }   
  });
});

Answer 3

Должно быть достаточно просто адаптировать ваш ранее принятый ответ по мере необходимости. У вас все еще есть span s (хотя я не вижу идентификатор верхней навигации).

Вам нужно заглянуть в обработчик .click . Вам также необходимо выяснить, как вы связываете элементы div, содержащие ваше мегамену, с каждым диапазоном, который вы хотите запустить. Уникальные идентификаторы могут работать.