HTML可折疊，點擊時無法展開

Question

我的代碼看起來不錯（或者可能不是），當我在在線平台上嘗試時，它似乎可以工作，但是在本地運行時，它卻無法工作。 例如，當我在w3school的try中輸入確切的代碼時，似乎沒有問題。

這是我正在使用的javascript文件：“ https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js ”

當我嘗試在線查找時，我不斷收到答復，說您需要一個jquery文件，我確定我有。

非常感謝您的幫助。

編輯：早在我的代碼中，我使用“ content2”而不是“ content”。 那是一個錯誤，我只是在弄亂我的代碼而忘了改回來。 它仍然不適用於“內容”。


<div class="prtbox">
  <img src="graphics/tmp/xx1.png" class="partnerimg">
  <div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  </div>

  <div class="prtbox">
  <img src="graphics/tmp/xx2.png" class="partnerimg">
  <div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  </div>

  <div class="prtbox">
  <img src="graphics/tmp/xx3.png"class="partnerimg">
  <div class="partnerdesc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  </div>


.partnerimg{
  width: 250px;
  padding-bottom: 2%;
  cursor: pointer;
}
.prtbox{
  padding-bottom: 30px;
  width: 33%;
  display: inline-block;
}

.partnerdesc{
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

var coll = document.getElementsByClassName("partnerimg");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {

    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

編輯：由於問題似乎在於我這一邊沒有顯示的代碼，我將在這里列出我的.html代碼。 我只使用html和css文件，並且顯示了我的整個css文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>

<script>
var coll = document.getElementsByClassName("partnerimg");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {

    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = this.scrollHeight + "px";
    }
  });
}
</script>
  <link rel="stylesheet" type="text/css" href="css/index_styles2.css">
  </head>

<body>


  <div class="prtbox">
  <img src="graphics/tmp/ca.png" class="partnerimg">
  <div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  </div>

  <div class="prtbox">
  <img src="graphics/logob.eps" class="partnerimg">
  <div class="partnerdesc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  </div>
</body>
</html>

Answer 1

嘗試如下：

 var coll = document.getElementsByClassName("partnerimg"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = this.scrollHeight + "px"; } }); }

 .partnerimg{ width: 250px; padding-bottom: 2%; cursor: pointer; } .prtbox{ padding-bottom: 30px; width: 33%; display: inline-block; } .partnerdesc{ padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }

 <div class="prtbox"> <img src="graphics/tmp/xx1.png" class="partnerimg"> <div class="partnerdesc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <div class="prtbox"> <img src="graphics/tmp/xx2.png" class="partnerimg"> <div class="partnerdesc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <div class="prtbox"> <img src="graphics/tmp/xx3.png"class="partnerimg"> <div class="partnerdesc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div>

我嘗試在本地系統中的以下代碼及其正常工作。 核實：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .partnerimg { width: 250px; padding-bottom: 2%; cursor: pointer; } .prtbox { padding-bottom: 30px; width: 33%; display: inline-block; } .partnerdesc { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <div class="prtbox"> <img src="https://dummyimage.com/100X100/000/fff" class="partnerimg"> <div class="partnerdesc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <div class="prtbox"> <img src="https://dummyimage.com/100X100/000/fff" class="partnerimg"> <div class="partnerdesc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <div class="prtbox"> <img src="https://dummyimage.com/100X100/000/fff" class="partnerimg"> <div class="partnerdesc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </body> <script> var coll = document.getElementsByClassName("partnerimg"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = this.scrollHeight + "px"; } }); }

Answer 2

如前所述，這里不需要jquery。 另一個問題是，此代碼在在線編輯器中也將不起作用，因為未定義您要訪問的元素content2的高度。 將其更改為以下內容也將為您工作-

content.style.maxHeight = content.scrollHeight + "px";

Answer 3

嘗試將腳本放置在HTML文檔的底部，至少在其使用的元素之后。 它可能在DOM完成加載之前就在運行，因此尚未創建元素，但會導致它引發錯誤。

HTML可折疊，點擊時無法展開

問題描述

3 個解決方案

解決方案1
0 2019-07-22 06:09:21

解決方案2
0 2019-07-22 06:18:43

解決方案3
0 已采納 2019-07-22 07:20:24

HTML可折疊，點擊時無法展開

問題描述

3 個解決方案

解決方案1 0 2019-07-22 06:09:21

解決方案2 0 2019-07-22 06:18:43

解決方案3 0 已采納 2019-07-22 07:20:24

解決方案1
0 2019-07-22 06:09:21

解決方案2
0 2019-07-22 06:18:43

解決方案3
0 已采納 2019-07-22 07:20:24