March 12, 2012

unordered HTML list with unordered list inside. Wrapped next each other

Question by JohannesM

I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)

goal

If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>

Answer by JohannesM

I gave up. I’m a pretty worse inquirer 🙂
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.

http://jsfiddle.net/UyrdS/6/

But it’s not dynamic. It has a static width. That is still the problem.

Answer by Starx

I think this is what you wanted

alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
    alllinks.hide(); //First hide all the links
    e.preventDefault();
    if ($(this).parent().children('ul').size() > 0) {
        $(this).parent().children('ul').toggle();
    }
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!