jquery 如何一次只有 1 個活動切換？

Question

我正在制作一個需要我有 18 個圖標的網站，每個圖標都有自己的隱藏分配 div，一旦按下隱藏的 div 就會向下滑動並顯示在圖標下方。 這些圖標必須與我要隱藏/顯示的內容位於不同的 Div 中。

我在 wordpress 上使用 Elementor，因為我對網頁設計和編程一無所知，

我找到了這個 jquery，當我點擊圖標時，我用它來顯示和隱藏 Div。 我已將圖標分配為.showBlock1.ShowBlock2.ShowBlock3 等，並將 Divs 分配為.hiddenBlock1.hiddenBlock2.hiddenBlock3 等......它按我想要的方式工作，除了我一次只想要 1 個活動，所以如果我按下icon1，它顯示 Div1，然后如果我按 icon2，它會隱藏 Div1 並顯示 Div2，依此類推。

jQuery(document).ready(function( $ ){
    
  var hbtn = $(".showBlock");
  var hcon = $(".hiddenBlock");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});

jQuery(document).ready(function( $ ){
    
  var hbtn = $(".showBlock2");
  var hcon = $(".hiddenBlock2");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});

由於我對編碼一無所知，我一直在重復腳本並更改 class.showBlock 和.hiddenBlock 上的數字。

Answer 1

也許以下內容對您有幫助？

 $(function(){ var hbtn = $(".showBlock"); var hcon = $(".hiddenBlock"); hcon.hide(); hbtn.click(function(e) { var curr=hcon.eq(hbtn.index(this)); hcon.not(curr).hide(); curr.slideToggle("slow"); e.preventDefault(); }); });

 .cont1 {height:50px}.hiddenBlock {display: inline-block; width:60px; height: 40px; background-color:#ccc}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cont1"> <div class="hiddenBlock">1</div> <div class="hiddenBlock">2</div> <div class="hiddenBlock">3</div> <div class="hiddenBlock">4</div> <div class="hiddenBlock">5</div> <div class="hiddenBlock">6</div> </div> <div> <button class="showBlock">show 1</button> <button class="showBlock">show 2</button> <button class="showBlock">show 3</button> <button class="showBlock">show 4</button> <button class="showBlock">show 5</button> <button class="showBlock">show 6</button> </div>

單擊按鈕將首先隱藏所有可見的.hcon元素，然后將.slideToggle與按鈕 position 對應的元素。

編輯

在查看了您的 web 頁面后，我可以簡化您的結構，如下所示：

 jQuery(function($){ const btns=$("div.showBlock"); const scts=$("section.hiddenBlock"); $("section").on("click","div.showBlock",function(){ let curr=scts.eq(btns.index(this)); scts.not(curr).hide(); curr.toggle(); }); })

 .showBlock {display: inline-block; background-color:#ccc; width:50px; margin:2px;padding:6px}.hiddenBlock {background-color:#eea; width:192px; padding:6px; margin-top:8px}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>... <section class="... elementor-element-51eaf85..." data-id="51eaf85" data-element_type="section"> <div class="elementor-container elementor-column-gap-no"> <div class="elementor-column... elementor-element-1a773d0 showBlock"...> one </div> <div class="elementor-column... elementor-element-6b9441a showBlock"...> two </div> <div class="elementor-column... elementor-element-ce4f2d4 showBlock"...> three </div> </div> </section> <section class="... elementor-element-fc98ed1 hiddenBlock..." data-id="fc98ed1" style="">first section</section> <section class="... elementor-element-cf64eb5 hiddenBlock..." data-id="cf64eb5" style="display: none;">second section</section> <section class="... elementor-element-f16da07 hiddenBlock..." data-id="f16da07" style="display: none;">third section</section>...

HTML 結構有一個頁面摘錄。 我刪除了一些 class 屬性以提高可讀性，並添加了一些臨時的 CSS 以使其“像樣”。

最重要的是，我將您的類“showBlock1”、“showBlock2”、“showBlock3”統一到“showBlock”和“hiddenBlock”、“hiddenBlock2”、“hiddenBlock3”到“hiddenBlock”。

看看它並玩弄它......