3

我有这样的代码：

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

每个课程再上 5 次（嗯，dois，...）。我正在尝试用这样的“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>
4

4 回答 4

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

由于所有元素似乎都有一个共同的 class subconteundo，因此您始终可以将它们定位为排除当前单击的元素。

于 2013-07-11T16:54:52.483 回答
1

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-> .dois-> .tres-> .quatro-> .cinco，这是有意的）。

此外，这将防止点击subconteudo向上滑动。（只会向上滑动其他人。）

演示链接在这里。

于 2013-07-11T17:07:22.840 回答
1

是的！:)

您只能使用 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>

你可以在这里看到演示

于 2013-07-12T01:20:51.160 回答
0

为所有这些设置一个通用类，然后这样做$('.commonclass').click(function(){$('.subconteudo').slideUp();})你会节省 6 行。

于 2013-07-11T17:21:17.507 回答