hiding all under certain div tag

Question

andrewliu 0 Junior Poster

13 Years Ago

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

javascript

Edited 13 Years Ago by andrewliu because: n/a

2 Contributors
4 Replies
123 Views
23 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by andrewliu

SolidSolutions 13 Junior Poster

13 Years Ago

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>

Reply to this topic

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.

andrewliu 0 Junior Poster · Answer 1 · 2011-02-21T23:35:30+00:00

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?

SolidSolutions 13 Junior Poster · Answer 2 · 2011-02-22T05:04:30+00:00

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

andrewliu 0 Junior Poster · Answer 3 · 2011-02-22T06:01:05+00:00

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();

    });

});