Question

I am new to jQuery and looks like I need your help after not being able to get any thing from google. I have a normal accordion menu with menus (level-1) and submenus (level-2). In most cases, only the level-2 links point to a href link and the level-1 is just like a header, but in some cases, I need the level-1 link to lets say fetch some HTML content. So basically, when you click on the parent menu, it would fetch the html content and at the same time the submenu would show.

Below is my code. When I click the level-1 link, at the address bar it shows the # sign which is because in the second line of my code I have the href value assigned as a # sign. If I remove the value, then it goes to the page I want and shows the toggled menu (level-2) as well, but level-2 menu disappears quickly. Any help is appreciated. Thanks in advance.

    $(document).ready(function() {


var submenu = $(location).attr('href').substring(url.lastIndexOf('/'), url.length);

var LinkObj = $('a[href*="' + submenu + '"]').parent();
$('.mainmenunav').find(LinkObj).parent().show();


    SelLink = $('.mainmenunav').find(LinkObj).parent();


            $('.level-1 > li > a').click(function(){

                 if (SelLink != null && SelLink.html() != $(this).next().html()){
                    SelLink.slideToggle(800);
                }

                $(this).next().slideToggle(400);

                if (SelLink != null && SelLink.html() == $(this).next().html()){
                    SelLink = null;
                }else{
                    SelLink = $(this).next();
                }
            });

    });

The HTML view:

<ul id="mainmenunav">
    <li>Sport
        <ul>
            <li><a href="#">Football</a></li>
            <li><a href="#">Tennis</a></li>
        </ul>
    </li>
    <li><a href="#">News</a>
        <ul>
            <li><a href="#">Africa</a></li>
            <li><a href="#">Asia</a></li>
        </ul>
    </li>
</ul>

When I click the level-1 link, at the address bar it shows the # sign which is because in the second line of my code I have the href value assigned as a # sign. If I remove the value, then it goes to the page I want and shows the toggled menu (level-2) as well, but level-2 menu disappears quickly. Don’t get the reason.

Answer 1

Problem solved. Actually Liferay itself does half of the job; it just needs some tweaking and plus some jQuery as in my first post for the toggling and disabling some of the links.