Question

我只是一个试图编写网站的高中生，我还不是最好的，因此请求将任何jQuery NOT 包含在解决方案中，因为我还没有学到它。但是，我遇到了关于eventListeners和CSS的display属性的问题。在我解释之前，GitHub上这个项目的链接是here，它应该在分支，commentBox下面。简而言之，我基本上在屏幕上有一堆主题，当你点击“查看评论”时，主题应该扩展，并且应该出现“添加评论”textarea。以下是关于我如何制作此代码的三个关键事项：

主题展开后，任何点击主题内的点击都不会将其关闭
任何点击外部展开主题都会关闭主题
当一个主题展开时，点击另一个 未展开 主题上的“查看评论”将扩展该主题并关闭其他

打开和关闭主题的这些部分有效，当主题展开时，评论框始终显示;但是，发生的最大错误是在另一个主题被展开时点击另一个“查看评论”（上面列出的数字3）。该主题将打开，另一个主题将关闭，但评论框不会消失。我相信这是因为变量 currentOpenComBox 在上一个注释框设置为 display：none 之前更改为新打开的注释框，因为javascript中的所有内容都是如此动态并依赖于用户点击的内容。

只需查看包含基本脚本的jsfiddle或查看GitHub项目here即可。您在下面看到的大量纯JS脚本是扩展和关闭div的全部功能。请看这里或在jsfiddle。

var openCloseTopic = function(commentDiv){
  var topicDiv =  commentDiv.parentElement.parentElement.parentElement;
  var currentlyOpenComBox;
  //diplays comment box at bottom of topic
  for(var i = 0; i < topicDiv.childNodes.length; i++){
    if(topicDiv.childNodes[i].tagName == "TEXTAREA"){
      currentlyOpenComBox = topicDiv.childNodes[i];
    }
  }

  //When user clicks on "view comments", expand div
  if(event.target == commentDiv){
    //this closes others div if you click on "view comments" and another div is already open
    var topicClass = document.getElementsByClassName("topic");
    for(var i = 0; i < topicClass.length; i++){
      if(topicClass[i].clientHeight == "400"){ //if any topic is already open close it
        //this keeps only one topic open at all times
        currentlyOpenComBox.style.display = "none";
        topicClass[i].style.height = "145px";
      }
    }

    topicDiv.style.height = "400px";
    currentlyOpenComBox.style.display = "block";
  }
  //When the user clicks anywhere outside of the topic, close it
  else{
    //checks to see if user is clicking inside topic div
    if(topicDiv.contains(event.target) && topicDiv.style.height == "400px"){
      topicDiv.style.height = "400px";
    }
    else{
      topicDiv.style.height = "145px";
      currentlyOpenComBox.style.display = "none";
    }
  }
}

//checks all clicks on window
var openTopic;
window.addEventListener("click", function(){
  openCloseTopic(openTopic);
},
false)

var commentClass = document.getElementsByClassName("comments");
for(var i = 0; i < commentClass.length; i++){
  commentClass[i].addEventListener("click", function(){
    openCloseTopic(this);
    openTopic = this;
  }, 
  false);
}

再次，在jsfiddle中，单击一个div上的“查看注释”，然后在另一个div上再次“查看注释”，您会发现注释框不会消失。请不要jQuery ...非常感谢提前。

Answer 1

这是因为你得到currentlyOpenComBox错误，你总是得到你已经点击过的那个并改变它的显示。甚至没有使用旧评论框。您必须在功能之外将此currentlyOpenComBox定义为global。首先尝试，这意味着当currentlyOpenComBox未定义时，在openCloseTopic函数的开头定义它，之后只需按住它直到您为其提供display:none，然后将其定义为新框并且给它display:block。生命周期就是这样。

//SORT OVERLAY
function openOverlay(x) {
  document.getElementById("sortOverlay").style.border = "2px solid #838383";
  document.getElementById("sortOverlay").style.width = "250px";
  if (x === 1) {
    document.getElementById("sortOverlay").style.marginLeft = "0";
    var mostRecentHeight = document.getElementById("mostRecent").offsetHeight;
    document.getElementById("sortOverlay").style.height = mostRecentHeight + "px";

  }

  if (x === 2) {
    document.getElementById("sortOverlay").style.marginLeft = "0";
    var allTopicsHeight = document.getElementById("allTopics").offsetHeight;
    document.getElementById("sortOverlay").style.height = allTopicsHeight + "px";
  }
}

function closeOverlay() {
  document.getElementById("sortOverlay").style.width = "0";
  document.getElementById("sortOverlay").style.border = "0";
}
var currentlyOpenComBox;
var openCloseTopic = function(commentDiv) {
  var topicDiv = commentDiv.parentElement.parentElement.parentElement;
  
  //diplays comment box at bottom of topic
  if(currentlyOpenComBox==null)
  {
    for (var i = 0; i < topicDiv.childNodes.length; i++) {
      if (topicDiv.childNodes[i].tagName == "TEXTAREA") {
        currentlyOpenComBox = topicDiv.childNodes[i];
      }
    }
  }

  //When user clicks on "view comments", expand div
  if (event.target == commentDiv) {
    //this closes others div if you click on "view comments" and another div is already open
    var topicClass = document.getElementsByClassName("topic");
    for (var i = 0; i < topicClass.length; i++) {
      if (topicClass[i].clientHeight == "400") {
        //this keeps only one topic open at all times
        currentlyOpenComBox.style.display = "none";
        topicClass[i].style.height = "145px";
      }
    }
    
    for (var i = 0; i < topicDiv.childNodes.length; i++) {
    if (topicDiv.childNodes[i].tagName == "TEXTAREA") {
      currentlyOpenComBox = topicDiv.childNodes[i];
    }
  }
    
    topicDiv.style.height = "400px";
    currentlyOpenComBox.style.display = "block";
  }
  //When the user clicks anywhere outside of the topic, close it
  else {
    //checks to see if user is clicking inside topic div
    if (topicDiv.contains(event.target) && topicDiv.style.height == "400px") {
      topicDiv.style.height = "400px";
    } else {
      topicDiv.style.height = "145px";
      currentlyOpenComBox.style.display = "none";
    }
  }
}

//checks all clicks on window
var openTopic;
window.addEventListener("click", function() {
    openCloseTopic(openTopic);
  },
  false)

var commentClass = document.getElementsByClassName("comments");
//console.log(commentClass);
for (var i = 0; i < commentClass.length; i++) {
  commentClass[i].addEventListener("click", function() {
      openCloseTopic(this);
      openTopic = this;
    },
    false);
}

/*
font-family: 'Orbitron', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Lato', sans-serif;
*/

.container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}


/* Most Recent, left side of home page */

#mostRecent {
  display: inline-block;
}

#mostRecent h4 {
  display: none;
}

.topic {
  border: 2px solid #838383;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  /*padding-left: 60px;
	padding-top: 20px;
  height: 140px;*/
  height: 145px;
  width: 90%;
  background-color: white;
  font-size: 13px;
  color: #8D8D8D;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  transition: 0.2s;
  position: relative;
  /* this needs to be on parent to prevent commentBox from going outside div */
}

.topic:hover {
  -webkit-transform: scale(1.02, 1.02);
  -ms-transform: scale(1.02, 1.02);
  transform: scale(1.02, 1.02);
  transition: 0.2s;
  transition-timing-function: ease;
}

.allInfo {
  height: 100%;
  width: 85%;
  margin-right: auto;
  display: inline-block;
}

.description {
  margin-left: 60px;
  margin-top: 20px;
  width: 77%;
  height: 90px;
  display: block;
  overflow-y: auto;
}

.titleBigger {
  font-size: 17px;
  color: #838383;
}

.bottomInfo {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  width: 77%;
  height: 20px;
  margin-top: 10px;
  margin-left: 60px;
}

.date {
  display: block;
  /*margin-top: 37px;
	margin-left: 60px;*/
  width: 110px;
}

.comments {
  display: block;
  width: 110px;
  margin-left: auto;
  cursor: pointer;
  transition: 0.1s;
}

.comments:hover {
  color: #D0011B;
  transition: 0.1s;
}

.votes {
  width: 90px;
  margin-top: 55px;
  margin-right: 10px;
  margin-left: auto;
  display: inline-block;
}

.upArrow,
.downArrow {
  width: 35px;
  display: inline-block;
  transition: 0.2s;
}

.upArrow:hover,
.downArrow:hover {
  -webkit-transform: scale(0.93, 0.93);
  -ms-transform: scale(0.93, 0.93);
  transform: scale(0.93, 0.93);
  transition: 0.2s;
  transition-timing-function: ease;
}

.commentBox {
  width: 97%;
  height: 40px;
  font-size: 13px;
  padding-left: 30px;
  padding-top: 10px;
  border: 2px solid #C4C4C4;
  box-sizing: border-box;
  background-color: white;
  color: #838383;
  display: none;
  position: absolute;
  bottom: 10px;
  left: 1.5%;
  resize: none;
  outline: none;
  /*gets rid of blue outline*/
}

.commentBox:focus {
  background-color: #F2F2F2;
  border-color: #A0A0A0;
}

<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Lato|Orbitron|Raleway" rel="stylesheet">
<title>Home</title>

<body>
  </a>
  <div class="container">
    <!-- Left Side with Most Recent -->
    <div id="mostRecent">
			<h1>MOST RECENT</h1>
			<h4><a href="all-topics.html ">VIEW ALL TOPICS</a></h4>
			<!-- List of Topics -->
			<div class="topic ">
			  <div class="allInfo ">
					<div class="description ">
						<span class="titleBigger ">BETTER BATHROOMS</span>
						<br/><br />Bathrooms suck, better ones are needed. Toilets flush 40% of the time, you be able to wipe your butt 10% of the time if your luck enough to have a stall with toilet paper.
					</div>
					<div class="bottomInfo ">
						<div class="date ">added 4/10/2017</div>
						<div class="comments ">view comments <span>+</span></div>
					</div>
				</div>
				<!-- Up & Down Arrows -->
				<div class="votes ">
					<div class="upArrow ">
						<img src="./images/up-arrow.png "/>
					</div>
					<div class="downArrow ">
						<img src="./images/down-arrow.png "/>
					</div>
				</div>
				<textarea type="text " class="commentBox " placeholder="Add comment... "></textarea>
			</div>

      <div class="topic ">
        <div class="allInfo ">
					<div class="description ">
						<span class="titleBigger ">POT HOLES IN THE PARKING LOT</span>
						<br/><br />Bathrooms suck need better ones
					</div>
					<div class="bottomInfo ">
						<div class="date ">added 4/10/2017</div>
						<div class="comments ">view comments <span>+</span></div>
					</div>
				</div>

				<div class="votes ">
					<div class="upArrow ">
						<img src="./images/up-arrow.png "/>
					</div>
					<div class="downArrow ">
						<img src="./images/down-arrow.png "/>
					</div>
				</div>
				<textarea type="text " class="commentBox " placeholder="Add comment... "></textarea>
			</div>

			<div class="topic ">
			  <div class="allInfo ">
					<div class="description ">
						<span class="titleBigger ">GRASS NEEDS TO BE MORE GREEN</span>
						<br/><br />Bathrooms suck need better ones
					</div>
					<div class="bottomInfo ">
						<div class="date ">added 4/10/2017</div>
						<div class="comments ">view comments <span>+</span></div>
					</div>
				</div>

				<div class="votes ">
					<div class="upArrow ">
						<img src="./images/up-arrow.png "/>
					</div>
					<div class="downArrow ">
						<img src="./images/down-arrow.png "/>
					</div>
				</div>
				<textarea type="text " class="commentBox " placeholder="Add comment... "></textarea>
			</div>

			<div class="topic ">
			  <div class="allInfo ">
					<div class="description ">
						<span class="titleBigger ">WATER FOUNTAINS ARE GROSS</span>
						<br/><br />Bathrooms suck ass need better ones
					</div>
					<div class="bottomInfo ">
						<div class="date ">added 4/10/2017</div>
						<div class="comments ">view comments <span>+</span></div>
					</div>
				</div>

				<div class="votes ">
					<div class="upArrow ">
						<img src="./images/up-arrow.png "/>
					</div>
					<div class="downArrow ">
						<img src="./images/down-arrow.png "/>
					</div>
				</div>
				<textarea type="text " class="commentBox " placeholder="Add comment... "></textarea>
			</div>
		</div>
	</div>
</body>
</html>

变量在可以使用之前被更改（仅限JavaScript）

1 个答案: