Solved

jQuery Generalization

Posted on 2016-09-12
3
52 Views
Last Modified: 2016-09-12
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.

       //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.  

Open in new window


<!-- 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. -->

Open in new window

0
Comment
Question by:hbash
  • 2
3 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
1. Give all your top <div>'s a generic class  of main-menu (remove the top_1, top_2 etc)
2. Add this jQuery
jQuery
$(function() {
  $('.main-menu').hover(function() {
    $(this).addClass('active');
  }, function() {
    $(this).removeClass('active');
  });
});

Open in new window

Add this CSS
.main-menu + div {
  display: none;
}
.main-menu.active + div {
  display: block;
}

Open in new window

Working sample here
0
 
LVL 1

Author Comment

by:hbash
Comment Utility
Nice!!!! Thanks.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now