jQuery Generalization
I have a nested DIVs which represent a menu structure where the topmost element is displayed and on hover I make each top elements associated DIV visible.
I have two questions:
How can I implement my jQuery to show/hide the DIVs without a lot of flashing?
How can I generalize the jQuery statement to handle as many top level elements as I add to avoid hardcoding per top level (the all follow the same naming and nesting conventions)?
I will paste the DIVs and then the jQuery I use to process them.
I have two questions:
How can I implement my jQuery to show/hide the DIVs without a lot of flashing?
How can I generalize the jQuery statement to handle as many top level elements as I add to avoid hardcoding per top level (the all follow the same naming and nesting conventions)?
I will paste the DIVs and then the jQuery I use to process them.
//Fragment of the jQuery
$('.top_1').hover(function(){
$(".main_1").show();
$(".top_2").hide();
$(".top_3").hide();
$(".top_4").hide();
}, function(){
$(".main_1").hide();
$(".top_2").show();
$(".top_3").show();
$(".top_4").show();
});
$('.top_2').hover(function(){
$(".main_2").show();
$(".top_1").hide();
$(".top_3").hide();
$(".top_4").hide();
}, function(){
$(".main_2").hide();
$(".top_1").show();
$(".top_3").show();
$(".top_4").show();
});
//etc. <!-- Fragment of the DIVS -->
<!-- *********************************************************************************** -->
<div class="TopMenuLink_1" style="float:left;padding:20">
<div class="top_1" style="float:left;">
<a href="http://www.w3schools.com/js/default.asp">1-JavaScript Tutorial</a><br/>
</div> <!-- Close Top Div -->
<div class="main_1" style="padding:20;width:auto;">
<div class="col_1_1" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">2-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">3-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">4-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_1_2" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">5-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">6-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">7-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_1_3" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">8-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">9-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">10-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_1_4" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">11-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">12-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">13-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_1_5" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">14-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">15-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">16-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_1_6" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">17-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">18-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">19-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
</div><!-- Close Main Div -->
</div><!-- Close TopMenuLink Div -->
<!-- *********************************************************************************** -->
<div class="TopMenuLink_2" style="float:left;padding:20">
<div class="top_2" style="float:left;">
<a href="http://www.w3schools.com/js/default.asp">20-JavaScript Tutorial</a><br/>
</div> <!-- Close Top Div -->
<div class="main_2" style="padding:20;width:auto;">
<div class="col_2_1" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">21-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">22-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">23-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_2_2" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">24-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">25-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">26-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_2_3" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">27-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">28-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">29-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_2_4" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">30-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">31-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">32-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_2_5" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">33-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">34-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">35-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
<div class="col_2_6" style="float:left; height:100px;width:auto;padding-right:5">
<a href="http://www.w3schools.com/js/default.asp">36-JavaScript Tutorial</a><br/>
<a href="http://www.w3schools.com/html/default.asp">37-HTML Tutorial</a><br/>
<a href="http://www.w3schools.com/js/default.asp">38-JavaScript Tutorial</a><br/>
</div><!-- Close Col Div -->
</div><!-- Close Main Div -->
</div><!-- Close TopMenuLink Div -->
<!-- etc. -->ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You are welcome.
ASKER