0

単純なコードで（おそらく不要な）問題が発生しています。3 つの画像があり、クリックすると下の 3 つの div のいずれかが開きます。以前に開いたdivのトグルをキャンセルして、いつでも1つだけを開くことができるようにしたいだけです。

現時点での問題は、ボタンの 1 つをもう一度クリックしても、div を開くのではなくトグルをキャンセルしているため、何も起こらないことです。おそらく私のひどい言葉遣いからわかるように、私はこれにかなり慣れていないので、親切にしてください!

css は、最初から div の高さと不透明度が 0 になるように設定されています。

コード：

$(document).ready(function() {
    $("#picone").toggle(function() {
        $("#divone").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divtwo, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divone").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divtwo, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

$(document).ready(function() {
    $("#pictwo").toggle(function() {
        $("#divtwo").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divone, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divone, #divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

$(document).ready(function() {
    $("#picthree").toggle(function() {
        $("#divthree").animate({
            height: 400,
            opacity: 1
        }, 500);
        $("#divone, #divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
    }, function() {
        $("#divthree").animate({
            height: 0,
            opacity: 0
        }, 500);
        $("#divone, #divtwo").animate({
            height: 0,
            opacity: 0
        }, 500);
    });
});

ありがとう ：）

4

1 に答える 1

0

フィードバックをありがとう。

結局のところ、トグル機能は私が望んでいたものではありませんでした。余分なものを取り除きました

$(document).ready(function(){

@hsalamaが提案したように、

。トグル

@François Wahlのようなイベントが提案しました。

それがどのように終わったかは次のとおりです。

$(document).ready(function(){
    $("#picone").click(function() {
        $("#divone").animate(
            {height:300, opacity:1}, 500
        );
        $("#divtwo, #divthree").animate(
            {height:0, opacity:0}, 500
        );
    });

    $("#pictwo").click(function() {
        $("#divtwo").animate(
            {height:300, opacity:1}, 500
        );
        $("#divone, #divthree").animate(
            {height:0, opacity:0}, 500
        );
    });

    $("#picthree").click(function() {
        $("#divthree").animate(
            {height:300, opacity:1}, 500
        );
        $("#divone, #divtwo").animate(
            {height:0, opacity:0}, 500
        );
    });
});

みんなありがとう ：）

于 2012-09-20T10:10:49.333 に答える