Javascript 使用classList隐藏和显示元素的问题

我需要实现一个功能，其中一个div在单击另一个div时显示，如果再次单击该div，则应该隐藏该div

下面是代码的一小部分：

我正在使用EventUtil处理程序处理事件以及事件委派

因此，当我单击id为“kk”的Section 1时，会显示另一个id为“kkDetails”的div。但是，当我单击id为“kk”的div时，我希望id为“kkDetails”的div消失。我怎样才能做到这一点

就我所见，currentProjectClassList对象没有像我预期的那样更新。虽然，我不明白为什么

---

PS：我是编程新手，所以请容忍任何无知

您遇到的问题是此部分：

  otherProjects = doc.getElementsByClassName('projectDetails');
  for (var i = otherProjects.length - 1; i >= 0; i--) {
            var projectClassList = otherProjects.item(i).classList;
            if (projectClassList.contains('showMe')) {
                projectClassList.remove('showMe');
                projectClassList.add('hideMe');
            }
        };

实际上，您正在隐藏元素，然后在稍后再次显示它，例如，请将此部分修改为：

      otherProjects = doc.getElementsByClassName('projectDetails');
      for (var i = otherProjects.length - 1; i >= 0; i--) {
                if(otherProjects.item(i).id !== idName){
                    var projectClassList = otherProjects.item(i).classList;
                    if (projectClassList.contains('showMe')) {
                        projectClassList.remove('showMe');
                        projectClassList.add('hideMe');
                    } 
                }
            };

在本节中，您将交换所选div的可见状态：

    if (!currentProjectClassList.contains('showMe')) {
        currentProjectClassList.remove('hideMe');
        currentProjectClassList.add('showMe');
    } else {
        currentProjectClassList.remove('showMe');
        currentProjectClassList.add('hideMe');
    }

---

但是，在代码的前一部分中，由于您选择的元素还具有projectDetails类，因此它将删除showMe并添加hideMe。因此，当它到达上面的代码部分时，if（！currentProjectClassList.contains（'showMe'）将始终为真。

您遇到的问题是该部分：

  otherProjects = doc.getElementsByClassName('projectDetails');
  for (var i = otherProjects.length - 1; i >= 0; i--) {
            var projectClassList = otherProjects.item(i).classList;
            if (projectClassList.contains('showMe')) {
                projectClassList.remove('showMe');
                projectClassList.add('hideMe');
            }
        };

实际上，您正在隐藏元素，然后在稍后再次显示它，例如，请将此部分修改为：

      otherProjects = doc.getElementsByClassName('projectDetails');
      for (var i = otherProjects.length - 1; i >= 0; i--) {
                if(otherProjects.item(i).id !== idName){
                    var projectClassList = otherProjects.item(i).classList;
                    if (projectClassList.contains('showMe')) {
                        projectClassList.remove('showMe');
                        projectClassList.add('hideMe');
                    } 
                }
            };

在本节中，您将交换所选div的可见状态：

    if (!currentProjectClassList.contains('showMe')) {
        currentProjectClassList.remove('hideMe');
        currentProjectClassList.add('showMe');
    } else {
        currentProjectClassList.remove('showMe');
        currentProjectClassList.add('hideMe');
    }

---

但是，在代码的前一部分中，由于您选择的元素还具有projectDetails类，因此它将删除showMe并添加hideMe。因此，当它到达上面的代码部分时，if（！currentProjectClassList.contains（'showMe'）将始终为真。

我将使用单个类来切换可见性。这要容易管理得多。我还将通过某种属性（而不是在javascript中使用switch语句）将click元素与toggled元素链接起来

//跨浏览器事件处理程序
var EventUtil={
addHandler:函数（元素、类型、处理程序）{
if（element.addEventListener）{
元素。addEventListener（类型、处理程序、false）；
}else if（元素附件）{
元素.attachEvent（“on”+类型，handler）；
}否则{
元素[“on”+类型]=处理程序；
}
},
getEvent:函数（事件）{
返回事件？事件：window.event；
},
getTarget:函数（事件）{
返回event.target | | event.src元素；
},
preventDefault:函数（事件）{
if（event.preventDefault）{
event.preventDefault（）；
}否则{
event.returnValue=false；
}
},
removeHandler:函数（元素、类型、处理程序）{
if（element.removeEventListener）{
元素。removeEventListener（类型，处理程序，false）；
}else if（element.detachEvent）{
detachEvent（“on”+类型，处理程序）；
}否则{
元素[“on”+类型]=null；
}
},
停止播放：功能（事件）{
if（事件停止播放）{
event.stopPropagation（）；
}否则{
event.cancelBubble=true；
}
}
};
var portfolio=document.getElementById（'portfolio'）；
addHandler（公文包，'click'，函数（事件）{
event=EventUtil.getEvent（事件）；
var target=EventUtil.getTarget（事件）；
var divId=target.getAttribute（'href'）；
if（divId）{
event.preventDefault（）；
排列
.from（document.queryselectoral（'.projectDetails:not（.hideMe）'））
.forEach（函数（a）{
a、 classList.add（'hideMe'）
});
document.querySelector（divId）.classList.remove（'hideMe'）
}
});
.projectDetails{
显示：块；
}
.projectDetails.hideMe{
显示：无；
}

正文

文本2

文本3

我将使用单个类来切换可见性。这要容易管理得多。我还将通过某种属性（而不是在javascript中使用switch语句）将click元素与toggled元素链接起来


//跨浏览器事件处理程序
var EventUtil={
addHandler:函数（元素、类型、处理程序）{
if（element.addEventListener）{
元素。addEventListener（类型、处理程序、false）；
}else if（元素附件）{
元素.attachEvent（“on”+类型，handler）；
}否则{
元素[“on”+类型]=处理程序；
}
},
getEvent:函数（事件）{
返回事件？事件：window.event；
},
getTarget:函数（事件）{
返回event.target | | event.src元素；
},
preventDefault:函数（事件）{
if（event.preventDefault）{
event.preventDefault（）；
}否则{
event.returnValue=false；
}
},
removeHandler:函数（元素、类型、处理程序）{
if（element.removeEventListener）{
元素。removeEventListener（类型，处理程序，false）；
}else if（element.detachEvent）{
detachEvent（“on”+类型，处理程序）；
}否则{
元素[“on”+类型]=null；
}
},
停止播放：功能（事件）{
if（事件停止播放）{
event.stopPropagation（）；
}否则{
event.cancelBubble=true；
}
}
};
var portfolio=document.getElementById（'portfolio'）；
addHandler（公文包，'click'，函数（事件）{
event=EventUtil.getEvent（事件）；
var target=EventUtil.getTarget（事件）；
var divId=target.getAttribute（'href'）；
if（divId）{
event.preventDefault（）；
排列
.from（document.queryselectoral（'.projectDetails:not（.hideMe）'））
.forEach（函数（a）{
a、 classList.add（'hideMe'）
});
document.querySelector（divId）.classList.remove（'hideMe'）
}
});
.projectDetails{
显示：块；
}
.projectDetails.hideMe{
显示：无；
}