翻过一个元素，打开另一个元素

Question

I have a menu structure where the submenus are in separate divs elsewhere on the page. The parent elements and submenus are all numbered, and I'm trying to find a way to roll over a parent element and open its corresponding submenu without having to use a separate selector for each one. The parent elements look like this:

<li id="primary-nav-parent-0"></li>
<li id="primary-nav-parent-1"></li>
<li id="primary-nav-parent-2"></li>
<li id="primary-nav-parent-3"></li>
<li id="primary-nav-parent-4"></li>
<li id="primary-nav-parent-5"></li>

And the submenus look like this:

<div id="primary-nav-sub-menu-0" class="primary-nav-sub-menu"></div>
<div id="primary-nav-sub-menu-1" class="primary-nav-sub-menu"></div>
<div id="primary-nav-sub-menu-2" class="primary-nav-sub-menu"></div>
<div id="primary-nav-sub-menu-3" class="primary-nav-sub-menu"></div>
<div id="primary-nav-sub-menu-4" class="primary-nav-sub-menu"></div>
<div id="primary-nav-sub-menu-5" class="primary-nav-sub-menu"></div>

I can't seem to figure out how to accomplish this. Any help would be greatly appreciated. Thanks!

Answer 1

One way is

var $subs = $('.primary-nav-sub-menu').hide();
$('li[id^=primary-nav-parent-]').click(function(){
    var $target = $('#primary-nav-sub-menu-' + $(this).index());
    //or var $target = $('#primary-nav-sub-menu-' + this.id.match(/(\d+)$/)[1]); if you don't want to depend on the index
    $subs.not($target).stop(true, true).slideUp();
    $target.stop(true, true).slideDown()
})

Demo: Fiddle

But a better solution will be

<ul>
    <li id="primary-nav-parent-0" class="primary-nav-parent" data-target="#primary-nav-sub-menu-0">0</li>
    <li id="primary-nav-parent-1" class="primary-nav-parent" data-target="#primary-nav-sub-menu-1">1</li>
    <li id="primary-nav-parent-2" class="primary-nav-parent" data-target="#primary-nav-sub-menu-2">2</li>
    <li id="primary-nav-parent-3" class="primary-nav-parent" data-target="#primary-nav-sub-menu-3">3</li>
    <li id="primary-nav-parent-4" class="primary-nav-parent" data-target="#primary-nav-sub-menu-4">4</li>
    <li id="primary-nav-parent-5" class="primary-nav-parent" data-target="#primary-nav-sub-menu-5">5</li>
</ul>

then

var $subs = $('.primary-nav-sub-menu').hide();
$('.primary-nav-parent').click(function(){
    var $target = $($(this).data('target'));
    $subs.not($target).stop(true, true).slideUp();
    $target.stop(true, true).slideDown()
})

Demo: Fiddle

Answer 2

One way is to parse the number out of the id.

   $('[id*="primary-nav-parent"]').on('mouseover mouseleave',function(){        
      $('[id$="sub-menu-' + this.id.match(/\d+/) + '"]').toggle();
   });

JSFIDDLE