4

我正在做一个菜单，每个项目都有它的子菜单。这是标记：

<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}

脚本

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

我遇到的问题是，如果我点击一个项目，它会向下滑动它的子菜单，但是如果我再次点击它，它会再次向上滑动和向下滑动它的子菜单，它已经打开了......有点奇怪的效果对于用户...任何想法如何解决它？

4

4 回答 4

1

您需要检查现有的子菜单是否已经可见。如果是，您不想再次将其滑下。

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/

于 2013-04-15T16:12:01.557 回答
0

在 jquery 中使用切换

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

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

于 2013-04-15T16:09:07.727 回答
0

它正在做你编码它要做的事情。相反，使用.slideToggle();

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

jsFiddle 示例

于 2013-04-15T16:12:36.360 回答
0

这应该有帮助

function show_submenu(that){
if(!$(that).next('ul.submenu:first').is(":visible")){
        $('ul.submenu').slideUp();
        $(that).next('ul.submenu:first').slideDown();
}
    }
于 2013-04-15T16:15:39.467 回答