javascript 如何折叠多个对象并切换另一个对象

z6psavjg 于 2023-02-18 发布在 Java

关注(0)|答案(1)|浏览(147)

我目前正在学习JS的beggining，我想知道如何才能使一个或多个部分崩溃时，一个按钮被点击，但仍然打开想要的部分与toggleSection()这里是整个脚本：

<body>
      <section id="features" class="none">
        <div class="content">
            <div class="single-item">
              <div><h3 class="kat_slick"><button type="button"onclick="toggleSection('kat')"> <img src="0full.jpg" alt=""> Katarina</button></h3></div>
                <div><h3 class="mercenarykat_slick"><button type="button"onclick="toggleSection('mercenary')"> <img src="1full.jpg" alt="">Katarina Mercenaire</button></h3></div>
                <div><h3 class="redcardkat_slick"><button type="button"onclick="toggleSection('redcard')"> <img src="2full.jpg" alt="">Katarina Carton Rouge</button></h3></div>
                <div><h3 class="bilgewaterkat_slick"><button type="button"onclick="toggleSection('bilgewater') "> <img src="3full.jpg" alt="">Katarina de Bilgewater</button></h3></div>
                <div><h3 class="kittykat_slick"><button type="button"class="blyat" onclick="toggleSection('kittykat')"> <img src="4full.jpg" alt="">Katarina Mistigri</button></h3></div>
                <div><h3 class="highcommandkat_slick"><button type="button"onclick="toggleSection('highcommand')"> <img src="5full.jpg" alt="">Katarina du Haut Commandement</button></h3></div>
                <div><h3 class="sandstormkatkat_slick"><button type="button"onclick="toggleSection('sandstorm')"> <img src="6full.jpg" alt="">Katarinadu Désert</button></h3></div>
                <div><h3 class="slaybellekat_slick"><button type="button"onclick="toggleSection('slaybelle')"> <img src="7full.jpg" alt="">Katarinadu Sucre d'Orge</button></h3></div>
                <div><h3 class="warringkingdomkat_slick"><button type="button"onclick="toggleSection('warringkingdom')"> <img src="8full.jpg" alt="">Katarinadu du Royaume en Guerre</button></h3></div>
                <div><h3 class="projectkat_slick"><button type="button"onclick="toggleSection('project')"> <img src="9full.jpg" alt="">Project : Katarina</button></h3></div>
                <div><h3 class="deathswormkat_slick"><button type="button"onclick="toggleSection('deathsworm')"> <img src="10full.jpg" alt="">Katarina Tanatophore</button></h3></div>
                <div><h3 class="battleacademiakat_slick"><button type="button"onclick="toggleSection('battleacademia')"> <img src="11full.jpg" alt="">Katarina de l'Académie de Combat</button></h3></div>
                <div><h3 class="bloodmoonkat_slick"><button type="button"onclick="toggleSection('bloodmoon')"> <img src="12full.jpg" alt="">Katarina Lune de Sang</button></h3></div>
                <div><h3 class="battlequeenkat_slick"><button type="button"onclick="toggleSection('battlequeen')"> <img src="13full.jpg" alt="">Katarina Reine du Combat</button></h3></div>
                <div><h3 class="highnoonkat_slick"><button type="button"onclick="toggleSection('highnoon')"> <img src="14full.jpg" alt="">Katarina de l'Ouest</button></h3></div>
              </div>
            </div>
          </div>
        </section>  
        </section>
        <section id="kat" style="display:none;"> <img src="0full.jpg" alt="">  </section>
        <section id="mercenary" style="display:none;"> <img src="1full.jpg" alt="">  </section>
        <section id="redcard" style="display:none;"> <img src="2full.jpg" alt="">  </section>
        <section id="bilgewater" style="display:none;"> <img src="3full.jpg" alt="">  </section>
        <section id="kittykat" style="display:none;"> <img src="4full.jpg" alt="">  </section>
        <section id="highcommand" style="display:none;"> <img src="5full.jpg" alt="">  </section>
        <section id="sandstorm" style="display:none;"> <img src="6full.jpg" alt="">  </section>
        <section id="slaybelle" style="display:none;"> <img src="7full.jpg" alt="">  </section>
        <section id="warringkingdom" style="display:none;"> <img src="8full.jpg" alt="">  </section>
        <section id="project" style="display:none;"> <img src="9full.jpg" alt="">  </section>
        <section id="deathsworm" style="display:none;"> <img src="10full.jpg" alt="">  </section>
        <section id="battleacademia" style="display:none;"> <img src="11full.jpg" alt="">  </section>
        <section id="bloodmoon" style="display:none;"> <img src="12full.jpg" alt="">  </section>
        <section id="battlequeen" style="display:none;"> <img src="13full.jpg" alt="">  </section>
        <section id="highnoon" style="display:none;"> <img src="14full.jpg" alt="">  </section>

下面是我使用或尝试使用的函数：

<script>function toggleSection(id) {
        let section = document.getElementById(id);
        let display = section.style.display;
      
        if (display === "none") {
          section.style.display = "block";
        } else {
          section.style.display = "none";
        }
      }  
      jQuery('button').click( function(e) {
      jQuery('.collapse').collapse('hide');
      });
      </script>

我的想法是将第一个按钮链接到第一个部分，例如（这是很容易做到的一个功能），但也关闭所有其他部分，如果他们是打开的。
我试着写了一个函数，我检查他们的'显示'是'无'，如果他们不是，它会改变它为无，但它似乎也关闭了一个我想打开摆在首位。我也尝试使用Bootstrap，但我只是不能理解它自己，所以它结束了什么也不做。

JavaScript

来源：https://stackoverflow.com/questions/75467237/how-to-collapse-multiple-objects-and-toggle-another-one

1条答案

按热度按时间

deyfvvtc1#

我通常通过 first 隐藏/折叠 all section和 after 显示/展开id来实现类似的功能，这样你就不必单独触发所有其他的部分。
因此，只需将collapse('hide')部分放在函数的顶部。

function toggleSection(id) {
    let section = document.getElementById(id);
    let display = section.style.display;

    // Give collapsible sections the `collapse` class.
    jQuery('section.collapse').collapse('hide');
  
    if (display === "none") {
      section.style.display = "block";
    } else {
      section.style.display = "none";
    }
}

只要给予可折叠的部分collapse类（在HTML示例中没有），就不必用这种方式编程click所有按钮。

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 如何折叠多个对象并切换另一个对象

1条答案

相关问题

热门标签

最新问答