Question

我添加了以下代码来通过单击图像来展开/折叠Div。这很好用，但是一个问题是默认情况下显示了Div，并且我需要更改JS代码，因此，默认情况下Div将被隐藏，并且仅在单击图像时才可见。如果可能的话，也请帮助我调整Div展开或折叠的速度。

function toggle5(showHideDiv, switchImgTag) {
  var ele = document.getElementById(showHideDiv);
  var imageEle = document.getElementById(switchImgTag);
  if (ele.style.display == "block") {
    ele.style.display = "none";
    imageEle.innerHTML = '<img src="https:/PublishingImages/env3.png">';
  } else {
    ele.style.display = "block";
    imageEle.innerHTML = '<img src="Supplier_Compliance/PublishingImages/env3.png">';
  }
}

<div id="headerDivImg">
  <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');">
    <img src="https://teams.connect.te.com/sites/BPDev/PublishingImages/attention1.jpg">
  </a>
</div>
<div id="contentDivImg" style="display: block;">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

Answer 1

如果使用Jquery，则可以轻松实现，并且可以调整div展开和折叠的速度。

首先添加Jquery。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

添加您的HTML。

<a id="imageDivLink">

   <img height="100" src="https://visualpharm.com/assets/552/Expand-595b40b65ba036ed117d1be8.svg"> 

</a>


<div id="contentDivImg">

This demo uses plus and minus images for hiding and showing  your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your.

</div>

在body标签内添加jquery代码。

$(document).ready(function(){ 

    $("#imageDivLink").click(function(){

       $( "#contentDivImg" ).slideToggle( "slow", function() {
         // Animation complete.
       });

   });
});

Answer 2

您不应使用诸如style或onclick之类的HTML属性。它们是古老的，出于多种原因不建议使用。阅读this（约onclick）和this（约style）

改为使用EventListener。

要默认隐藏div，请使用display: none。请勿使用如上所述的style属性。要么使用单独的CSS文件，要么使用style标签。

function toggle5(showHideDiv, switchImgTag) {
  var ele = document.getElementById(showHideDiv);
  var imageEle = document.getElementById(switchImgTag);
  if (ele.style.display == "block") {
    ele.style.display = "none";
    imageEle.innerHTML = '<img src="https:/PublishingImages/env3.png">';
  } else {
    ele.style.display = "block";
    imageEle.innerHTML = '<img src="Supplier_Compliance/PublishingImages/env3.png">';
  }
}

// Add the EventListener to your element that toggles the div
document.getElementById('imageDivLink').addEventListener('click', () => toggle5('contentDivImg', 'imageDivLink'));

#contentDivImg {
  display: none;
}

<div id="headerDivImg">

  <a id="imageDivLink"><img src="https://teams.connect.te.com/sites/BPDev/PublishingImages/attention1.jpg"></a>
</div>
<div id="contentDivImg">This demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your
  div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus
  images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.his
  demo uses plus and minus images for hiding and showing your div dynamically via JavaScript.</div>

关于折叠div上的过渡，您可能需要阅读this article about transitions，the docs和how to apply transitions / animations to an element with JavaScript。

通过单击图像来展开/折叠Div

2 个答案: