Links im Seitenmenü anzeigen, wenn die Hauptnavigationsknoten schweben

Question

Ich möchte Links im Seitenmenü anzeigen, je nachdem, welcher Link im oberen Navigationsbereich angezeigt wird, und diese anzeigen, bis ein anderer Hyperlink angezeigt wird. Hier ist, was ich habe:

HTML:

<ul class="nav navbar-nav"> 
    <li class="nav"><a class="toggle" href="#">LINK 1</a></li> 
    <li class="nav"><a class="toggle" href="#">LINK 2</a></li> 
    <li class="nav"><a class="toggle" href="#">LINK 3</a></li> 
    <li class="nav"><a class="toggle" href="#">LINK 4</a></li> 
    <li class="nav"><a class="toggle" href="#">LINK 5</a></li> 
    <li class="nav"><a class="toggle" href="#">LINK 6</a></li> 
</ul> 

<div class="sideMenu"> 
    <div id="sideMenuLinks"> 
     <ul id="menuContent" class="menuContent collapse out"> 
      <li><a href="#">SM LINK 1</a></li> 
      <li><a href="#">SM LINK 2</a></li> 
      <li><a href="#">SM LINK 3</a></li> 
      <li><a href="#">SM LINK 4</a></li> 
      <li><a href="#">SM LINK 5</a></li> 
      <li><a href="#">SM LINK 6</a></li> 
     </ul> 
    </div> 
</div> 

jQuery:

$(document).ready(function() { 
    $('.toggle').hover(function() { 
     $('#sideMenuLinks').show('slow'); 
    }); 
}); 

Dies funktioniert nur auf schweben anzeigen, aber offensichtlich nur für sideMenuLinks, ich habe mehr Links in unterschiedlichen IDs, so dass, wenn Ich schwebte auf "LINK 2", diese Links würden ersetzt und so weiter. Sinn ergeben?

Danke!

Answer 1

würde ich ein data-* Attribut zu den wichtigsten Navigations-Links hinzufügen wie folgt:

<ul class="nav navbar-nav"> 
    <li class="nav"><a class="toggle" data-menu="first" href="#">LINK 1</a></li> 
    <li class="nav"><a class="toggle" data-menu="second" href="#">LINK 2</a></li> 
    <li class="nav"><a class="toggle" data-menu="third" href="#">LINK 3</a></li> 
</ul> 

<div class="sideMenu"> 
    <div id="sideMenuLinks"> 
     <ul id="first" class="menuContent collapse out"> 
      <li><a href="#">SM LINK 1</a></li> 
      <li><a href="#">SM LINK 2</a></li> 
     </ul> 
     <ul id="second" class="menuContent collapse out"> 
      <li><a href="#">SM LINK 1</a></li> 
      <li><a href="#">SM LINK 2</a></li> 
     </ul> 
     <ul id="third" class="menuContent collapse out"> 
      <li><a href="#">SM LINK 1</a></li> 
      <li><a href="#">SM LINK 2</a></li> 
     </ul> 
    </div> 
</div> 

Dann könnte man den data-menu Wert erhalten, wenn schweben:

$(".toggle").hover(function() { 
    $(".menuContent").each(function() { 
     $(this).hide(); 
    }); 
    var menu = $(this).attr("data-menu"); 
    $('#' + menu).show('slow'); 
}); 

habe nicht getestet, aber das könnte die Menüs etwas dynamischer machen.

Answer 2

Wenn ich richtig verstehe, haben Sie mehrere IDs, die Sie nur anzeigen möchten, wenn ein entsprechender Link irgendwo anders auf der Seite schwebt.

Also, was Sie machen könnten, ist ein bisschen mehr von dem, was Sie haben. Stellen Sie sich vor Sie diesen HTML bekam:

<ul class="nav navbar-nav"> 
    <li class="nav"><a class="toggle1" href="#">LINK 1</a></li> 
    <li class="nav"><a class="toggle2" href="#">LINK 2</a></li> 
    <li class="nav"><a class="toggle3" href="#">LINK 3</a></li> 
</ul> 

<div class="sideMenu"> 
    <div id="sideMenuLinks1"> 
     <ul id="menuContent" class="menuContent collapse out"> 
      <li><a href="#">SM LINK 1</a></li> 
      <li><a href="#">SM LINK 2</a></li> 
      <li><a href="#">SM LINK 3</a></li> 
      <li><a href="#">SM LINK 4</a></li> 
      <li><a href="#">SM LINK 5</a></li> 
      <li><a href="#">SM LINK 6</a></li> 
     </ul> 
    </div> 
<div id="sideMenuLinks2"> 
     <ul id="menuContent" class="menuContent collapse out"> 
      <li><a href="#">SM LINK 1</a></li> 
      <li><a href="#">SM LINK 2</a></li> 
      <li><a href="#">SM LINK 3</a></li> 
      <li><a href="#">SM LINK 4</a></li> 
      <li><a href="#">SM LINK 5</a></li> 
      <li><a href="#">SM LINK 6</a></li> 
     </ul> 
    </div> 
<div id="sideMenuLinks3"> 
     <ul id="menuContent" class="menuContent collapse out"> 
      <li><a href="#">SM LINK 1</a></li> 
      <li><a href="#">SM LINK 2</a></li> 
      <li><a href="#">SM LINK 3</a></li> 
      <li><a href="#">SM LINK 4</a></li> 
      <li><a href="#">SM LINK 5</a></li> 
      <li><a href="#">SM LINK 6</a></li> 
     </ul> 
    </div> 
</div> 

Jetzt können Sie eine einfache for-Schleife und der jQuery Sie bereits bekommen, es in Gang zu bringen. jQuery:

$(document).ready(function() { 
    for(i=0,i<3,i++){ 
     classname = '.toggle'+i; 
     id = '#sideMenuLinks'+i; 
     $(classname).hover(function() { 
      $(id).show('slow'); 
     }); 
    } 
}); 

Ich habe nicht getestet, aber es ist eine einfache, umfassende Lösung. Hoffe das hat dir geholfen! .