Question

我使用HTML / CSS和javascript创建了一个嵌套的手风琴。我有多个主手风琴，每个手风琴有2个子手风琴。我的预期结果是扩展子手风琴并使下一个主手风琴向下移动，但是实际结果是主手风琴没有向下移动且子手风琴没有适当地扩展。

如果运行我的小提琴示例，则单击第一个子手风琴将向下推第二个子手风琴，但不会按Main＃2，并且第二个子手风琴不会在Main＃1或Main＃上展开2。

如果有人可以帮助我指出正确的方向，我将不胜感激！谢谢！

HTML：

 <body>

        <header>
            <h1>Pokemon Stadium</h1>
        </header>

        <div id="selectionArea">
            <!-- pokemon cards share class but have their own IDs -->

            <div id="pikachu" class="pokemon">
                <img src="pikachu.png" height="200px" width="200px">
                <span id="pikachuHp">100</span>
                </div>


            <div id="bulbasaur" class="pokemon">
                    <img src="bulbasaur.jpg" height="200px" width="200px">
                    <span id="bulbasaurHp">200</span>
                </div>

            <div id="charmander" class="pokemon">
                    <img src="charmander.png" height="200px" width="200px">
                    <span id="charmanderHp">150</span>
                </div>

             <div id="squirtle" class="pokemon">
                    <img src="squirtle.jpg" height="200px" width="200px">
                    <span id="squirtleHp">120</span>
                </div>

            <div id="mario" class="pokemon">
                    <img src="mario.jpg" height="200px" width="200px">
                    <span id="marioHp">300</span>
                </div>



        </div>

        <!-- Enemies are moved here upon selection-->

        <div id="defenderArea">

        </div>

        <!-- The players pokemon goes here-->

        <div id="playerArea">

                <button type="button" id="attackBtn" class="btn btn-primary">Attack</button>

        </div>

        <!-- Scripts & jQuery -->


        <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

  <script>

  $(document).ready(function() {
    $('#pikachu').click(function() {  
        $("#pikachu").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#squirtle').click(function() {  
        $("#squirtle").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#charmander').click(function() {  
        $("#charmander").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#bulbasaur').click(function() {  
        $("#bulbasaur").appendTo("#playerArea");
    });
});

    $(document).ready(function() {
    $('#mario').click(function() {  
        $("#mario").appendTo("#playerArea");
    });
});

    if ( $('#playerArea').hasClass(".pokemon") ) {
        //do something 
        alert("theres a pokemon in the playerArea");
    };
  </script>

CSS：

<div class="collapsible">
  <h3><strong>Main#1</strong></h3>
</div>
  <div class="content">
    <div class="collapsible">
      <h4>Sub#1</h4>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </div>
    <div class="collapsible">
    <h4>Sub#2</h4>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
</div>

<div class="collapsible">
  <h3><strong>Main#2</strong></h3>
</div>
<div class="content">
  <div class="collapsible">
    <h4>Sub#1</h4>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
  <div class="collapsible">
    <h4>Sub#2</h4>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  </div>
</div>

Javascript：

.collapsible {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 1vw;
  width:97%;
  height: 60px;
  max-height: 100%;
  margin: 5px 10px 5px 10px;
  border: 2px solid black;
  text-align: left;
  outline: none;
  font-size: 25px;
}

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

h3{
  display:inline-block;
  vertical-align: middle;
}

h4{
  display:inline-block;
  vertical-align: middle;
  font-size: 22px;
}

Answer 1

我对您的代码进行了一些更改。

我将此部分添加到您的CSS中：

.collapsible ~ .content{
  height: 0px;
}

.collapsible.active + .content{
  height: 100%;
}

评论了“最大高度”行：

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

并简化JS：

$(function() {
  var coll = document.getElementsByClassName("collapsible");

  //setting buttons of class 'collapsible' to extend on click
  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function () {
      this.classList.toggle("active");
    });
  }
});

您可以在此处检查更改： https://jsfiddle.net/xpvt214o/501924/

通过此操作，隐藏和显示由CSS控制。

希望这对您有所帮助。

嵌套手风琴无法正确扩展javascript

1 个答案: