Question

我有这样的代码：

$(".um").click(function () {
    $(".subconteudo.dois").slideUp();
    $(".subconteudo.tres").slideUp();
    $(".subconteudo.quatro").slideUp();
    $(".subconteudo.cinco").slideUp();
    $(".subconteudo.um").slideDown(3000);
});

每个班级（嗯，dois，......）多5次。而我正在尝试使用'this'来制作一个更小的代码：

$(".um, .dois, .tres, .quatro, .cinco").click(function () {
    $(".subconteudo.um").slideUp();
    $(".subconteudo.dois").slideUp();
    $(".subconteudo.tres").slideUp();
    $(".subconteudo.quatro").slideUp();
    $(".subconteudo.cinco").slideUp();
    $(this + ".subconteudo").slideDown();
});

有可能吗？怎么样？谢谢顺便说一句html代码是这样的：

<div class="menu">
    <div class="submenu um"></div>
    <div class="submenu dois"></div>
    <div class="submenu tres"></div>
    <div class="submenu quatro"></div>
    <div class="submenu cinco"></div>
</div>
<div class="conteudo">
    <div class="subconteudo um"></div>
    <div class="subconteudo dois"></div>
    <div class="subconteudo tres"></div>
    <div class="subconteudo quatro"></div>
    <div class="subconteudo cinco"></div>
</div>

Answer 1

为什么不只是这个

$(".um, .dois, .tres, .quatro, .cinco").click(function () {
    if($(this).hasClass('subconteudo')) {
       $(".subconteudo").not(this).slideUp();
    }
    else if ($(this).hasClass('submenu')) {
       $(".submenu").not(this).slideUp();
    }
    $(this).slideDown(3000);
});

由于所有元素似乎都有一个共同的类subconteundo，因此您始终可以将它们作为目标点击元素的目标。

Answer 2

使用filter()和简单的正则表达式（/\b(um|dois|tres|quatro|cinco)\b/g）尝试此解决方案：

$(".um, .dois, .tres, .quatro, .cinco").click(function () {
    var firedClass = "."+this.className.match(/\b(um|dois|tres|quatro|cinco)\b/g)[0];
    $(".subconteudo").filter(".um, .dois, .tres, .quatro, .cinco").not(firedClass).slideUp();
    $(".subconteudo").filter(firedClass).slideDown();
});

通过正则表达式获取菜单点击类。这是必要的，因为menu可能有多个列表.um, .dois, .tres, .quatro, .cinco - （如果是，它会选择按此顺序找到的第一个类：.um - ＆gt; {{1 }} - ＆gt; .dois - ＆gt; .tres - ＆gt; .quatro，这是故意的。

此外，这会使点击的.cinco向上滑动。（只会向其他人上滑。）

<强> Demo link here.

Answer 3

是的！：）

您只能使用4行。我已经改变了一些原始的HTML代码，但我认为现在更好了。

JS

$(".menu").children().click(function () {
    $(".conteudo").children().slideUp();
    $(".conteudo ."+$(this).attr("class")).slideDown();
});

HTML

<div class="menu">
    <div class="um">MENU 1</div>
    <div class="dois">MENU 2</div>
    <div class="tres">MENU 3</div>
    <div class="quatro">MENU 4</div>
    <div class="cinco">MENU 5</div>
</div>
<div class="conteudo">
    <div class="um">CONTEUDO 1</div>
    <div class="dois">CONTEUDO 2</div>
    <div class="tres">CONTEUDO 3</div>
    <div class="quatro">CONTEUDO 4</div>
    <div class="cinco">CONTEUDO 5</div>
</div>

You can see the demo here

Answer 4

为所有这些人设置一个公共课程并以$('.commonclass').click(function(){$('.subconteudo').slideUp();})方式执行，这样你就可以保存6行。

JQuery onclick选择另一个类

4 个答案: