CODEWITHSUNDEEP
jqueryhtml
davey
davey

Reputation: 1564

Jquery toggle on anchor using its parent to find child ul

I'm trying to toggle segments in my menu using jquery. I can getting it working if i bind the toggle on the <li> element but then as soon as I click on any elements in the <li> the elements disappear, obviously because of the toggle. So I've tried adding the toggle event to the anchor with no success please see my code below. Jquery is at bottom. Thanks

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <header><link href="mobmenu.css" rel="stylesheet" type="text/css"/>
        </header>
        <div id="wrapper">
        <h1>Flyout Menu Demo - (Vertical Menu System) </h1>
            <div id="main_navigation">
                <ul class="menu_level1">
                    <li><a href="#">Home</a></li>
                    <li class="submenu1"><a class = "sb1" href="#">Products</a>
                        <ul class="menu_level2">
                            <li class="submenu2"><a class = "sb2" href="#">Category 1</a>
                                <ul  class="menu_level3">
                                <li class="submenu"><a class = "sb3" href="#">Product 1</a>
                                    <ul  class="menu_level4">
                                    <li><a href="#">Product 1 Sub 1</a></li>
                                    <li><a href="#">Product 1 Sub 2</a></li>
                                    <li><a href="#">Product 1 Sub 3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Product 2</a></li>
                                <li><a href="#">Product 3</a></li>
                                </ul>
                            </li>
                            <li class="submenu2"><a class = "sb2" href="#">Category 2</a>
                                <ul  class="menu_level3">
                                <li><a href="#">Product 1</a></li>
                                <li><a href="#">Product 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="submenu1"><a class= "sb1" href="#">Services</a>
                        <ul  class="menu_level2">
                            <li><a href="#">Services 1</a></li>
                            <li><a href="#">Services 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.sb1').bind('mousedown', openSubMenu1);
                $('.sb2').bind('mousedown', openSubMenu2);

                //$('.submenu2').bind('mousedown', openSubMenu);

                function openSubMenu1() { $(this).parent.find('ul.menu_level2').toggle(); };
                function openSubMenu2() { $(this).parent.find('ul.menu_level3').toggle(); };

            });
        </script>

    </body>
</html>

Upvotes: 0

Views: 568

Answers (3)

Zhivko
Zhivko

Reputation: 550

If I understand this right the problem is when you click elements inside li, the li event is triggered? If so, how about adding event.stopPropagation to the li children elements?

Something like this 

$('ul li').children().on('mousedown', function(event){
    event.stopPropagation();
});

Upvotes: 1

Th0rndike
Th0rndike

Reputation: 3436

I think you're going up only one level (which worked with li because it is one level higher, while the event on 'a' needs to go 2 levels up), you need to get 2 levels up in order to get the ul. So use .parent() a second time, or use .parents() which goes up any number of levels.

Upvotes: 1

Jeremy
Jeremy

Reputation: 1972

Try using the visible selector. I haven't tested this but it should be a push in the right direction if it doesn't work.

    <script type="text/javascript">
        $(document).ready(function() {
            $('.sb1').mousedown(function() {
                var tmp = $(this).parent.find('ul.menu_level2');
                if ($(tmp).is(':visible')) {
                    tmp.hide();
                } else {
                    tmp.show();
                }
            });
            $('.sb2').mousedown(function() {
                var tmp = $(this).parent.find('ul.menu_level3');
                if ($(tmp).is(':visible')) {
                    tmp.hide();
                } else {
                    tmp.show();
                }
            });
        });
    </script>

Upvotes: 1

Related Questions