Question

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');

});

这个想法是用户点击选项并显示UL。这很好，但在第二次点击它不会再次隐藏菜单...任何想法为什么？它肯定会切换正确的菜单，但它不会在第二次点击时隐藏它：/

由于

Answer 1

这是因为你隐藏了.hide()的ul： http://jsfiddle.net/Y6E4X/

Answer 2

我道歉但我无法解释为什么它不能完全正常工作......我能做些什么来帮助，重新编写你的代码只需3行javascript：

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

    $(this).closest('.dropdown').toggleClass('selected');

});

示例：http://jsfiddle.net/peduarte/YfzbZ/1/

Answer 3

注释掉这一行：

 $('dl.dropdown dd ul').hide();

.toggle（）将为您打开和关闭菜单，因为您始终“隐藏”您的UL .toggle（）将始终将其重新打开。

Answer 4

试试这完美无缺

$('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');

        });

在JS Fiddle

上试试

Answer 5

你应该给slideToggle一个机会。

我通常将它用于此目的。

  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });

http://api.jquery.com/slideToggle/

jQuery切换不按预期工作

5 个答案: