nav slide on click w/ JQuery

[joshpit2003]

Hello.

 

For my drop-down Nav, I've implemented this JQuery code:

$("li").click(function () {
    	$('li > ul').not($(this).children("ul")).slideUp(100);
    	$(this).children("ul").slideToggle(100);
	});

I get the desired results:

- click on nav button for sliding drop-down

- click on another nav button slides the others up.

 

minus this one issue:

 

When I click on a child element I initiate a toggle.

This is un-desirable, because I only want the toggle to happen when I click the parents: CAD, 3D Printing, Laser Cutting (in example below).

 

here is my menu:

<ul>
   <li><a href="#">CAD</a>
	<ul class="subNav">
		<li><a href="cad-services.php">services</a></li>
		<li> <a href="cad-examples.php">examples</a></li>
		<li><a href="cad-quote.php">quote</a></li>
	</ul>
  </li>
  <li><a href="#">3D Printing</a>
	<ul class="subNav">
		<li><a href="3d-printing-services.php">services</a></li>
		<li><a href="3d-printing-examples.php">examples</a></li>
		<li><a href="3d-printing-quote.php">quote</a></li>
	</ul>
  </li>
  <li><a href="#">Laser Cutting</a>
	<ul class="subNav">
		<li><a href="laser-cutting-services.php">services</a></li>
		<li><a href="laser-cutting-examples.php">examples</a></li>
		<li><a href="laser-cutting-quote.php">quote</a></li>
	</ul>
  </li>
</ul>

What can I do to get the JQuery to function as I desire?

 

Thanks.

 

-Josh!

 

[dsonesuk]

Give parent ul a class

 

<ul class="myclass">
   <li><a href="#">CAD</a>
	<ul class="subNav">
		<li><a href="cad-services.php">services</a></li>
		<li> <a href="cad-examples.php">examples</a></li>
		<li><a href="cad-quote.php">quote</a></li>
	</ul>
  </li>
  <li><a href="#">3D Printing</a>
	<ul class="subNav">
		<li><a href="3d-printing-services.php">services</a></li>
		<li><a href="3d-printing-examples.php">examples</a></li>
		<li><a href="3d-printing-quote.php">quote</a></li>
	</ul>
  </li>
  <li><a href="#">Laser Cutting</a>
	<ul class="subNav">
		<li><a href="laser-cutting-services.php">services</a></li>
		<li><a href="laser-cutting-examples.php">examples</a></li>
		<li><a href="laser-cutting-quote.php">quote</a></li>
	</ul>
  </li>
</ul>

Then use this to target first level li only

$(".myclass > li").click(function () {
    	$('li > ul').not($(this).children("ul")).slideUp(100);
    	$(this).children("ul").slideToggle(100);
	});

Edited December 30, 2015 by dsonesuk

[joshpit2003]

Thanks Dsonesuk!

 

Unfortunately I didn't have any luck with your possible solution.

 

I did manage to find this solution:

$(".subNav").click(function (e) {
		e.stopPropagation();	
	});

as explained here:

http://stackoverflow.com/questions/19344334/prevent-firing-its-parents-click-event-on-clicking-a-child-element

 

and that seems to be working well.

 

Is there anything wrong with this solution?

And why do you think your solution isn't working for me?

(I'm curious, because it seems like it should have worked)

 

Thanks.

[dsonesuk]

That seems to me to target the wrong element, from your html you should target ul elements with class 'subNav' previous sibling anchors, thus not applying toggle effect to anchor elements with no sibling ul,

$(function() {
    $(".nav > li > ul.subNav").prev('a').click(function(e) {
        e.preventDefault(); //disable default action of going to clicked link
        $('.nav > li > ul').not($(this).next("ul")).slideUp(100);

        $(this).next("ul").slideToggle(100);

    });
});

<ul class="nav">
        <li><a href="cad_services.html">CAD</a>
            <ul class="subNav">
                <li><a href="cad_services.html">services</a></li>
                <li><a href="cad_examples.html">examples</a></li>
                <li class="lastSubNav"><a href="cad_quote.html">request a quote</a></li>
            </ul>
        </li>
        <li><a href="3d_printing_services.html">3D Printing</a>
            <ul class="subNav">
                <li><a href="3d_printing_services.html">services</a></li>
                <li><a href="3d_printing_examples.html">examples</a></li>
                <li class="lastSubNav"><a href="3d_printing_quote.html">request a quote</a></li>
            </ul>
        </li>
        <li><a href="laser_cutting.html">Laser Cutting</a></li>
        <li><a href="photography_services.html">Product Photography</a>
            <ul class="subNav">
                <li><a href="photography_services.html">services</a></li>
                <li><a href="photography_examples.html">examples</a></li>
                <li class="lastSubNav"><a href="photography_quote.html">request a quote</a></li>
            </ul>

        </li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html" id="navSelectedBlue">About</a></li>
    </ul>