Bouncing submenu jquery

Question

I´m doing a menu that every item has it´s submenu. this is the markup:

<ul id="menu">
    <li>
        <a href="javascript:void(0)" onclick="show_submenu(this)">TITLE 1</a>
        <ul class="submenu">
            <li>
                <a href="javascript:void(0)">sub1</a>
            </li>
            <li>
                <a href="javascript:void(0)">sub2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">TITLE 2</a>
        <ul class="submenu">
            <li>
                <a href="javascript:void(0)">sub1</a>
            </li>
            <li>
                <a href="javascript:void(0)">sub2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">TITLE 3</a>
    </li>
    <li>
        <a href="javascript:void(0)">TITLE 4</a>
    </li>
</ul>

css

.submenu{display:none}

script

function show_submenu(that) {
    $('ul.submenu').slideUp();
    $(that).next('ul.submenu:first').slideDown();
}

The problem I have is that if I click over an item, it slides down it´s submenu, BUT if I click over it again, it slidesup and slidesdown again it´s submenu, which is already opened... kind of weird effect for the user... any ideas how to fix it?

You're using jQuery... so there's no need for all those `href="javascript:void(0)"`. — Sparky, Apr 15 '13 at 16:16
I read it´s necessary to avoid issues with IE or something... — , Apr 15 '13 at 16:18
The main point of using a JavaScript framework like jQuery is to minimize any browser specific issues. You can use `href="#"` and then investigate how to properly implement [jQuery's `event.preventDefault()`](http://api.jquery.com/event.preventDefault/) within your jQuery code. — Sparky, Apr 15 '13 at 16:21
Yeah, in the article said it was better to use void(0) than the # you are saying... they discussed that :) sorry I don´t have the reference right now — , Apr 15 '13 at 16:23
I think you misunderstand. Sure, all by itself, `void(0)` may be a better option than `#`. However, it's not by itself. [Using jQuery's `preventDefault()`](http://api.jquery.com/event.preventDefault/) as I recommended, there is no issue with `href="#"` in any browser. See: http://stackoverflow.com/a/1164654/594235 — Sparky, Apr 15 '13 at 16:35

score 1 · Accepted Answer · answered Apr 15 '13 at 16:12

You need to check whether the existing submenu is visible already. If it is, you don't want to slide it down again.

var $submenu = $(that).next('ul.submenu:first'),
    viz = $submenu.is(":visible");
    $('ul.submenu').slideUp();
if (!viz) {
    $(that).next('ul.submenu:first').slideDown();
}

http://jsfiddle.net/ExplosionPIlls/zep6H/

score 0 · Answer 2 · answered Apr 15 '13 at 16:09

0

use toggle in jquery

$('#foo').toggle(showOrHide);

http://api.jquery.com/toggle/

answered Apr 15 '13 at 16:09

Roar

2,117
4
24
39

score 0 · Answer 3 · answered Apr 15 '13 at 16:12

0

It's doing exactly what you coded it to do. Instead, use .slideToggle();

function show_submenu(that){
    $(that).next('ul.submenu:first').slideToggle();
}

jsFiddle example

answered Apr 15 '13 at 16:12

j08691

204,283
31
260
272

score 0 · Answer 4 · answered Apr 15 '13 at 16:15

0

this should help

function show_submenu(that){
if(!$(that).next('ul.submenu:first').is(":visible")){
        $('ul.submenu').slideUp();
        $(that).next('ul.submenu:first').slideDown();
}
    }

answered Apr 15 '13 at 16:15

HaBo

13,999
36
114
206

Bouncing submenu jquery

4 Answers4