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 很陌生，我认为这可能只是逻辑上的问题，但这是我想要发生的场景：

用户单击四个按钮之一，它会下拉一个信息窗口。虽然该窗口仍处于打开状态，但用户单击了不同的按钮。窗口收缩并重新扩展，显示他们单击的按钮的信息。

截至目前，如果用户在窗口展开时单击 ANY 按钮，它只会收缩窗口，仅此而已。我尝试在每个函数中再次调用“onclick”函数，但它会与菜单同时执行并取消任何动画。

任何帮助将不胜感激！

4

0 回答 0