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

Posted 2023-05-07

【中文标题】jquery如何一次只有1个活动切换？

【英文标题】：jquery how to only have 1 active toggle at a time?

【发布时间】：2021-07-04 13:45:50

【问题描述】：

我正在制作一个需要我有 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 类上的数字。

【问题讨论】：

你不需要那么多代码来切换点击你可以检查this reference还有一个codepen link

我真的很抱歉，我真的很陌生，我真的很挣扎。我已经尝试使用该参考，但它不起作用（毫无疑问是我的错）。我需要的是单击一个按钮并在页面的不同部分创建一个 div 以隐藏/显示，但我似乎无法使其工作。

没有问题，这是帮助者社区，希望可以解决？

欢迎来到***。请花一些时间阅读***.com/help/how-to-ask，然后编辑您的问题以阐明例如“1”的含义...

我已经编辑了这个问题，我真的很抱歉，在我的脑海里似乎很清楚。希望现在可以理解了。

【参考方案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”。

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

【讨论】：

它似乎对我不起作用，因为我在这方面真的很糟糕，我不知道如何识别我的 18 个图标，（它们都分散在不同的部分page.) 到我的其他 18 个 Div（它们都分散在页面的不同部分。）。

如果你也能提供你的 HTML 会有所帮助，因为我上面的例子显然只是一个非常初级的例子。

自从我用 elementor 制作了网站，这是一个网页设计工具，我很难提供 html，但是这里是网站页面 uniway.chitas.cloud/protecao 也许它可以帮助我理解我的观点。非常感谢您的帮助，非常感谢您所做的一切。