Имея проблемы с несколькими скрытыми/открытыми DIV с помощью JQuery

Question

В настоящее время я создаю страницу для веб-сайта, на которой будет вертикальная панель навигации, и после нажатия на элементы меню/подменю на указанной панели навигации разные DIV будут скрытые/выявленные, показывающие и скрывающие разные продукты.

До сих пор я получил отображение/скрытие элементов главного меню, чтобы их можно было щелкнуть по ним.

Пример: Я нажимаю на ссылку «Первый элемент» в верхней части меню, и рядом с панелью навигации появляется сетка изображений первого элемента. Затем я нажимаю «Второй пункт меню», а первые изображения исчезают, появляются изображения второго предмета и т. Д.

Однако, когда я столкнулся с некоторыми проблемами, по какой-то причине, когда я нажимаю на одну из элементы подменю, его изображения отображаются, но я не могу получить соответствующие изображения элемента основного меню, чтобы исчезнуть.

Вот код для главного меню/субнациональном выпуск меню:

HTML

<ul class="accordion"> 
    <li class="item1"> 
     <a href="#">Product Category 1</a> 
     <ul> 
      <li class="sub1"><a href="#">Sub 1 </a></li> 
     </ul> 
    </li> 
</ul> 

<!---HIDDEN DIVS---> 

<div id='hidden_div' > 
    <img src="images/item1.png"/> 
</div> 
<div id='hidden_div2' > 
    <img src="images/item1.png"/> 
</div> 

Jquery ДЛЯ ПОКАЗЫВАТЬ И СКРЫТИЕ

Я не уверен, если панель навигации Javascript это проблема, но единственный файл Javascript, подключенный к этой странице, сведен к минимуму ... скажем слово, и я могу опубликовать код. Я не знаю, я потерян.

Answer 1

Ваша проблема здесь в том, что .sub1 находится внутри .item1, поэтому, когда вы нажимаете на .sub1, вы также нажимаете на .item1.

Это называется событие пузыри. Чтобы остановить это, просто используйте stopPropagation на вашем .sub1 мыши так:

$('.sub1').click(function(e) { 
    e.stopPropagation(); 
    $('#hidden_div2').show(); 
    $('#hidden_div').hide(); 
}); 

Если вы не хотите использовать stopPropagation вы также можете просто изменить вас селектор $('.item1>a) и $('.sub1>a').

Answer 2

Это был ваш HTML на самом деле, который его закручивал. У вас есть висячий тег <li> для продукта 1, который распространяется на прошлый продукт 2. Вот почему ваши клики всегда работают с первым битом.

http://jsfiddle.net/6wE52/