javascript - jquery如何一次只有1个活动切换?
问题描述
我正在制作一个需要我有 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 类上的数字。
解决方案
也许以下内容对您有帮助?
$(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”。
看看它并玩弄它......
推荐阅读
- laravel - 在 Azure VM (LAMP) 上部署自定义站点
- ajax - 如何在 Laravel 5.3 中修复 AJAX 模态表单
- html - 如何逐页查看 MTurk 任务?
- java - 循环依赖阻止在 Tomcat 上进行战争部署
- java - 为什么我的 continue 语句不会重新启动我的 while 循环?
- react-native - 一些可触摸的不透明度有效,而另一些则在 React Native Animated View 中无效
- rest - 如果我们在 REST 中创建了多个更新请求资源,对服务器端有什么影响
- java - 无法使用 Java 将字符串转换为 JSON
- vue.js - 我如何将我的列表的值与 v-model 和 value 放在一起?
- java - 如何用数组绘制向上的金字塔?