Can't show content text from menu using jQuery

Question

I am trying to make a submenu using jQuery. The idea is that when someone clicks on the first menu a submenu appears, then when someone clicks the submenu it disappears and shows a div with information but I cant make it work properly.

Here is my HTML:

<ul id="menu">
    <li>
        <a href="#">Item 1</a>
        <ul id="submenu">
            <li><a href="#" data-menu="show1">Sub menu 1</a></li>
            <li><a href="#" data-menu="show2">Sub menu 2</a></li>
        </ul>
    </li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

And this is my jQuery:

$(document).ready(function () {
    $('#menu li ').click(function () {
        $('#submenu').fadeToggle();
        $('.content').fadeOut();
    });
    $('ul#submenu li a').click(function () {
        var menu = $(this).data("menu");
        $('#' + menu).fadeIn();
    });
});

The idea is simple, if menu is clicked all the content divs must hide and the submenu must toggle (show if hidden, hide if shown.) When a submenu item is clicked, the submenu must hide and the content div matching the data attribute clicked must appear.

But, when I click the submenu item it shows the content for a moment then it disappears. Any idea on what I am doing wrong?

Here is the fiddle: https://jsfiddle.net/yab34zdw/

Where is .content in your HTML?

Barmar
– Barmar

2015-05-12 00:41:32 +00:00
Commented May 12, 2015 at 0:41 — Barmar
– Barmar, Commented May 12, 2015 at 0:41

Will Reese · Accepted Answer · 2015-05-12 01:09:32Z

3

When you click on a submenu item, both of those event handlers are being fired. The problem is with your selectors:

$('#menu li ') also captures the submenu items, which are also <li> tags that are descendants of the menu. You could just change the selector to $("#menu > li"), which captures only direct descendants (children), but I think in general its just better to add classes, and use simpler selectors.

HTML

<ul id="menu">
    <li class="menu-top-item>
        <a class="menu-top-item-link" href="#">Item 1</a>
        <ul id="submenu">
            <li class="menu-sub-item">
                <a class="menu-sub-item-link" href="#" data-menu="show1">Sub menu 1</a>
            </li>
            <li class="menu-sub-item">
                <a class="menu-sub-item-link" href="#" data-menu="show2">Sub menu 2</a>
            </li>
        </ul>
    </li>
</ul>

Javascript Fiddle

$('.menu-top-item-link').click(function () {
    $('#submenu').fadeToggle();
    $('.content').fadeOut();
    return false;
});
$('.menu-sub-item-link').click(function () {
    var menu = $(this).data("menu");
    $('#' + menu).fadeIn();
    return false;
});

edited May 12, 2015 at 1:09

answered May 12, 2015 at 0:42

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Barmar Over a year ago

The submenu items are descendants of the menu, not children.

Chico3001 Over a year ago

It doesnt work, it makes exactly the same, shows the content for a moment and then it dissapears...

Will Reese Over a year ago

@Chico3001 Sorry, I just noticed that I had one of the selectors still pointing to the <li> when it should have been pointing at the <a>. I've edited and added a Fiddle.

Chico3001 Over a year ago

Thanks... that return false was missing and the problem, do you have any link explaining why? will be very appreciated

Will Reese Over a year ago

The return false isn't the issue. If you delete it from the fiddle it still behaves the same way. The problem was that I had the top menu link pointing at the <li> which encompasses everything. Clicking on a submenu item is still inside the top <li> so both handlers were still firing. return false is in there to cancel the navigation that the <a> should normally trigger. If you return false in a click handler on a link, it prevents the link from navigating the browser to its target. In your case, that's still the same page, but it prevents adding a hash to your URL.

Kerning1 · Accepted Answer · 2015-05-12 01:46:32Z

I'm not sure if I got what you're going for but play around with this little tweak to see if it's closer to what you describe. I think both click functions were targeting your submenu content.

$(document).ready(function () {
    $('#menu .menu ').click(function () {
        $('#submenu').fadeToggle();
        $('.content').fadeOut();
    });
    $('ul#submenu li a').click(function () {
        var menu = $(this).data("menu");
        $('#' + menu).fadeToggle();
    });
})

<ul id="menu">
    <li>
        <a href="#" class="menu">Item 1</a>
        <ul id="submenu">
            <li><a href="#" data-menu="show1">Sub menu 1</a></li>
            <li><a href="#" data-menu="show2">Sub menu 2</a></li>
        </ul>
    </li>
</ul>
<div id="show1" class="content">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </div>
<div id="show2" class="content">Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri </div>

Collectives™ on Stack Overflow

Can't show content text from menu using jQuery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related