创建具有高度调整的垂直切换

Question

我相信我很接近。然而，我的开关在水平方向上工作得很好，而不是在垂直方向上。当我的切换是垂直的时，切换信息只能在第三个切换下查看，不能直接在其分配的切换下查看 header（希望这是有道理的 - 在编码中看到）我似乎无法为切换添加可调节的高度或者，我已经厌倦了很多 none 的工作方式。我想让高度成为内容的高度。任何帮助将不胜感激。

 var divs = ["Soft", "Broch", "tut"];
    var visibleDivId = null;

    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }

      hideNonVisibleDivs();
    }

    function hideNonVisibleDivs() {
      var i, divId, div;

      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);

        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

a{
  display: block;
}

  <a href="#" onclick="toggleVisibility('Soft');">soft</a>
  <a href="#" onclick="toggleVisibility('Broch');">broch</a>
  <a href="#" onclick="toggleVisibility('tut');">tut</a>
  
  <div id="Soft"  style="display: none;">Soft div</div>
  <div id="Broch" style="display: none;">broch div</div>
  <div id="tut"   style="display: none;">tut div</div>

切换功能正常。按一个切换其他是不活动的。任何建议都将非常有帮助

Answer 1

仅仅改变 dom 中的顺序还不够吗？

  <a href="#" onclick="toggleVisibility('Soft');">soft</a>
  <div id="Soft" style="display: none;">Soft div</div>

  <a href="#" onclick="toggleVisibility('Broch');">broch</a>
  <div id="Broch" style="display: none;">broch div</div>

  <a href="#" onclick="toggleVisibility('tut');">tut</a>
  <div id="tut" style="display: none;">tut div</div>

创建具有高度调整的垂直切换

Create a vertical toggle with height adjustment

html

javascript

css

jquery

toggle