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

すべての要素には共通のクラスがあるように見えるためsubconteundo、現在クリックされている要素を除いて、いつでもそれらをターゲットにすることができます。

于 2013-07-11T16:54:52.483 に答える
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 に答える
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 に答える
0

それらすべてに共通のクラスを配置すると、$('.commonclass').click(function(){$('.subconteudo').slideUp();})6行ほど節約できます。

于 2013-07-11T17:21:17.507 に答える