Member Avatar for andrewliu

Hello all!

I have a problem with my jquery.

I have hidden some parts of my menu, but I can't seem to hide the div tag.

How do I accomplish this?

This is my jquery:

$(function(){
    $('ul.ldd_menu li.topLink ul').hide();	

    $('li.topLink').hover(function(){
        $(this).find('ul').show()
		$(this).css({'background-color':'#000000', 'color':'#ffffff'});
    },function(){
        $(this).find('ul').hide();
		$(this).css({'background-color':'#ffffff','color':'#000000'});

    });

});

This is my html code:

<ul id="ldd_menu" class="ldd_menu">
	<li>
	        <span class='mainMenuTitle-first'><a href='#'>Home</a></span><!-- Increases to 510px in width-->				
	</li>
        <li class='topLink'>
		<span class='mainMenuTitle'><a href="#">Women</a></span>
			<div class="ldd_submenu">
                        <div class="submenu_top">
                    	<ul  class='submenu_left'>
				<li class="ldd_heading">Products</li>
...

It seems like my <div> class isn't getting hidden because if I do a border css, I can see the border lines. Help?

Thank you

Edited by andrewliu because: n/a
  • 2 Contributors
  • 4 Replies
  • 123 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by andrewliu
Member Avatar for SolidSolutions

You'll want to set your div css to display: none in the first function:
$('div.ldd_submenu').css('display','none');


Then in your jquery hover:
$('div.ldd_submenu').css('display','block');

And then set function for the handlerout back to display: none.

Something like this:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
    $('ul.ldd_menu .topLink div.ldd_submenu ul').hide();	
$('div.ldd_submenu').css('display','none');
    $('li.topLink').hover(function(){
$('div.ldd_submenu').css('display','block');
        $(this).find('ul').show()
		$(this).css({'background-color':'#000000', 'color':'#ffffff'});
    },function(){
        $(this).find('ul').hide();
		$(this).css({'background-color':'#ffffff','color':'#000000'});
                $('div.ldd_submenu').css('display','none');
    });

});
</script>
</head>
<body>
<ul id="ldd_menu" class="ldd_menu">
	<li>
	        <span class='mainMenuTitle-first'><a href='#'>Home</a></span><!-- Increases to 510px in width-->				
	</li>
        <li class='topLink'>
		<span class='mainMenuTitle'><a href="#">Women</a></span>
			<div class="ldd_submenu" style="border: 2px solid #00704a;">
                        <div class="submenu_top">
                    	<ul  class='submenu_left'>
				<li class="ldd_heading">Products</li>
                         </ul>
                         </div>
                        </div>
       </li>
</ul>
</body>
</html>
Member Avatar for andrewliu

excellent solution, but I have two categories, men and women. and if I hover over one of them, the borders from both categories show. How do I do it just from one of them?

Member Avatar for SolidSolutions

you could give each category its own class or id and use a separate function for each.

Member Avatar for andrewliu

ok. i got it

This is what I did for those who are curious still

$(function(){
    $('ul.ldd_menu li.topLink ul').hide();
	$('div.ldd_submenu').hide();
	$('div.submenu_top').hide();
    $('li.topLink').hover(function(){
        $(this).find('ul').show()
				$(this).css({'color':'#FFF','background-color':'#000000'});
		$(this).find('div').show()
    },function(){
        $(this).find('ul').hide();
				$(this).css({'color':'#000000','background-color':'#ffffff'});
		$(this).find('div').hide();

    });

});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.