jquery如何一次只有1个活动切换？

Question

我正在制作一个需要我有 18 个图标的网站，每个图标都有自己的隐藏分配 div，一旦按下隐藏的 Div 就会向下滑动并显示在图标下方。这些图标必须与我要隐藏/显示的内容位于不同的 Div 中。

我在 wordpress 上使用 Elementor，因为我对网页设计和编程一无所知，

我找到了这个 jquery，当我单击图标时，我用它来显示和隐藏 Div。 我已将图标分配为 .showBlock1 .ShowBlock2 .ShowBlock3 等，将 Div 分配为 .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();     
    });
});

由于我对编码一无所知，我一直在重复脚本并更改 .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 与按钮位置对应的元素隐藏。

编辑

查看您的网页后，我可以简化您的结构，如下所示：

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 结构是该页面的摘录。我删除了一些类属性以提高可读性，并添加了一些临时 CSS 以使其“可展示”。

除此之外，我将你的类“showBlock1”、“showBlock2”、“showBlock3”统一到“showBlock”和“hiddenBlock”、“hiddenBlock2”、“hiddenBlock3”到“hiddenBlock”。

看看它并玩弄它......