1

簡単に参照できるように、私の jsfiddle を次に示します。

http://jsfiddle.net/Syrne/gAgZr/1/

生の JS コードは次のとおりです。

var main = document.getElementById("main");
var clicked = false;

var dropdown1 = document.getElementById("box1");
var dropdown2 = document.getElementById("box2");

var icon1 = document.getElementById("icon1");
var icon2 = document.getElementById("icon2");
var icon3 = document.getElementById("icon3");
var icon4 = document.getElementById("icon4");

var select1 = document.getElementById("box1select");
var select2 = document.getElementById("box2select");

var originalHeight1 = dropdown1.style.height;
var originalHeight2 = dropdown2.style.height;

var originalSelect1 = select1.style.height;
var originalSelect2 = select2.style.height;

var selectImage = document.getElementsByClassName("select_image");

function clearAll() {
    for (var i = 0; i < selectImage.length; i++) {
        selectImage[i].style.display = "none";
    }
}

function fadeAll() {
    for (var i = 0; i < selectImage.length; i++) {
        selectImage[i].style.opacity = "0";
        selectImage[i].style.transition = "opacity 0.4s";
    }
}

icon1.onclick = function () {
    if (clicked === true) {
        dropdown1.style.height = originalHeight1;
        select1.style.height = originalSelect1;
        fadeAll();
        clicked = false;
    } else {
        clicked = true;
        clearAll();
        dropdown1.style.height = "320px";
        dropdown1.style.transition = "height 0.5s";
        select1.style.height = "65%";
        select1.style.transition = "height 0.48s";
    }
};

icon2.onclick = function () {
    if (clicked === true) {
        dropdown1.style.height = originalHeight1;
        select1.style.height = originalSelect1;
        fadeAll();
        clicked = false;
    } else {
        clicked = true;
        clearAll();
        dropdown1.style.height = "320px";
        dropdown1.style.transition = "height 0.5s";
        select1.style.height = "65%";
        select1.style.transition = "height 0.48s";
    }

};

icon3.onclick = function () {
    if (clicked === true) {
        dropdown1.style.height = originalHeight1;
        select1.style.height = originalSelect1;
        fadeAll();
        clicked = false;
    } else {
        clicked = true;
        clearAll();
        dropdown1.style.height = "320px";
        dropdown1.style.transition = "height 0.5s";
        select1.style.height = "65%";
        select1.style.transition = "height 0.48s";
    }

};

icon4.onclick = function () {
    if (clicked === true) {
        dropdown1.style.height = originalHeight1;
        select1.style.height = originalSelect1;
        fadeAll();
        clicked = false;
    } else {
        clicked = true;
        clearAll();
        dropdown1.style.height = "320px";
        dropdown1.style.transition = "height 0.5s";
        select1.style.height = "65%";
        select1.style.transition = "height 0.48s";
    }

};

だから私はJSにまったく慣れていないので、これは論理的には問題かもしれないと思いますが、私が望んでいるシナリオは次のとおりです。

ユーザーが 4 つのボタンのいずれかをクリックすると、情報ウィンドウがドロップダウンします。そのウィンドウがまだ開いている間に、ユーザーは別のボタンをクリックします。ウィンドウは、クリックしたボタンの情報とともに縮小および再拡大します。

現時点では、ウィンドウが展開されているときにユーザーがいずれかのボタンをクリックすると、単にウィンドウが収縮するだけで、それ以上のことはありません。各関数内で「onclick」関数を再度呼び出してみましたが、メニューと同時に実行され、アニメーションがキャンセルされます。

どんな助けでも大歓迎です！

4

0 に答える 0