CODEWITHSUNDEEP
jquerywordpressparent-child
Nina Morena
Nina Morena

Reputation: 255

jQuery Menu - Hidden Child Menu Issue

I'm working on a one page website and I have a fixed navigation menu on the left side of the screen. I've run into an issue with parent and child menu actions. When the page loads, the child menus are hidden until the user clicks a parent element with the child menu and it appears. I would like to make the child menu hide when another parent menu element is clicked. Please see the current code below:

<script>
$(function() {
            $('ul.main-nav a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                /*
                if you don't want to use the easing effects:
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1000);
                */
                event.preventDefault();
            });
        });

/sliding submenu/

        $('.sub-menu').hide();
        $("a").click(function(){
            $("ul",this).slideDown();
            $(this).parent().children("ul").toggle('slow');
        });

To see the actual website in action, please click here: http://oddsonrecords.com/recstudio

Upvotes: 0

Views: 453

Answers (2)

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

Change your javascript to

$('.sub-menu').hide();
$("a").click(function () {
  var sele = $(this).parent().children("ul");
    $('ul.sub-menu').each(function () {
        if($(this).hasClass('active')) { 
          $(this).toggle('slow');
          $(this).removeClass('active');
         }
    });
    sele.addClass('active');
    sele.toggle('slow');
});

Check http://jsfiddle.net/2RqzS/1/

Upvotes: 0

Chanckjh
Chanckjh

Reputation: 2597

I've made a little code for you. Hope that this will help u. http://jsfiddle.net/66QZJ/2/

HTML

<ul class="nav">
    <li class="parent"><a href="#">menu</a>
        <ul class="subnav">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
        </ul>
    </li>
    <li class="parent"><a href="#">menu</a>
        <ul class="subnav">
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
            <li>submenu</li>
        </ul>
    </li>
    <li class="parent"><a href="#">menu</a></li>
    <li class="parent"><a href="#">menu</a></li>
    <li class="parent"><a href="#">menu</a></li>
</ul>

CSS

.subnav{
    display: none;
}

JQuery

$('li.parent').on('click', function(){
    $(this).siblings().find('.subnav').slideUp();
    $(this).children('.subnav').slideDown(); 
});

Upvotes: 1

Related Questions