Question

我为li创建了两个单独的类，其中包含up＆amp;向下箭头背景图像。

HTML

<ul class="menu">
<li class="main">Menu 1
<ul class="submenu">
<li class="submenu_item">Sub menu 1</li>
<li class="submenu_item">Sub menu 2</li>
<li class="submenu_item">Sub menu 3</li>
</ul>
</li>

<li class="main">Menu 2
<ul class="submenu">
<li class="submenu_item">Sub menu 1</li>
<li class="submenu_item">Sub menu 2</li>
<li class="submenu_item">Sub menu 3</li>
</ul>
</li>
</ul>

CSS

li.main
{display:block;
background:#06C url(insert.png) top right no-repeat;
margin-top:1%;
}

.remove
{display:block;
background:#06C url(remove.GIF) top right no-repeat;
margin-top:1%;
}

脚本

$(".main:eq(0)").click(function () {
    $(".submenu:eq(0)").slideToggle(400);
    $(this).toggleClass("main remove");
    $(".submenu:eq(1)").slideUp(400);
});

$(".main:eq(1)").click(function () {
    $(".submenu:eq(1)").slideToggle(400);
    $(this).toggleClass("main remove");
    $(".submenu:eq(0)").slideUp(400);
});

当我点击我需要的时候，班级会改变，但是如果我再次点击menu1菜单2 课程也必须改变。

Answer 1

如果你想让它像手风琴一样，你可以这样做：

$('.main').click(function() {
    $(this).toggleClass("main remove").find('.submenu').slideToggle(400);
    $(this).closest('li').siblings('.main').find('.submenu').slideUp(400);
})

<强> Fiddle Demo

我认为当一个.main点击时，您不需要滑动其他.main，所以只需使用：

$('.main').click(function() {
    $(this).toggleClass("main remove").find('.submenu').slideToggle(400);
})

<强> Demo

Answer 2

使用:first或.eq()

$(".main").eq(0)

并切换课程如果您有<li class="main">上的主要内容，请仅申请.remove，请将其更改为其他课程

删除类添加类不起作用

2 个答案: