Question

这是我更容易引用的jsfiddle：

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

用户点击四个按钮中的一个，它会关闭一个信息窗口。当该窗口仍处于打开状态时，用户单击另一个按钮。窗口收缩并重新展开，并显示他们点击的按钮的信息。

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

非常感谢任何帮助！

Javascript的新手，有菜单交互的逻辑问题

0 个答案: