Question

I have the following code: http://jsfiddle.net/YfzbZ/

HTML

<dl class="dropdown right">
            <dt><a>Options</a></dt>
            <dd>
                <ul style="display:none;">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </dd>
        </dl>

JQUERY

$('dl.dropdown dt a').live('click', function () {

    var clicked = $(this);

    var toggleMenu = $(clicked).parents('dl').find('dd > ul');

    // Remove selcted class from all menus
    $('dl.dropdown dt a').removeClass('selected');
    // Hide all Uls
    $('dl.dropdown dd ul').hide();
    // and remove selected class for inner Lis
    $('dl.dropdown dd ul li').removeClass('selected');
    // Toggle the menu on each click
    $(toggleMenu).toggle();
    // Toggle the class on the button
    $(clicked).toggleClass('selected');

});

The idea is that a user clicks the options and it shows the UL. This is fine but on the second click it does not hide the menu again… Any ideas why? It is definitely toggling the correct menu but it’s just not hiding it on the second click :/

Thanks

Answer 1

try this it works perfect

$('dl.dropdown dt a').live('click', function () {

            var clicked = $(this);

            var toggleMenu = $(clicked).parents('dl').find('dd > ul');

            // Remove selcted class from all menus
            $('dl.dropdown dt a').toggleClass('selected');
            // Hide all Uls
            $('dl.dropdown dd ul').slideToggle();
            // and remove selected class for inner Lis
            $('dl.dropdown dd ul li').toggleClass('selected');
            // Toggle the menu on each click
            $(toggleMenu).toggle();
            // Toggle the class on the button
            $(clicked).toggleClass('selected');

        });

try this on JS Fiddle