gpt4 book ai didi

javascript - 显示和隐藏元素列表

转载 作者:可可西里 更新时间:2023-11-01 13:50:54 25 4
gpt4 key购买 nike

我正在尝试创建一个页面,可以在其中单击服务,然后将显示其描述。我有点明白了,但与此同时,它离我想要的还很远。

现在,我只有一个用于所有这些的服务 div,然后是用于描述的 service_description div。我单击的任何服务都会显示所有特定服务的描述。我希望服务描述仅针对所点击的服务显示。

我正在使用切换方法。我不确定这是否是最佳选择。页面加载后,一切都在显示,除非单击,否则我不希望显示描述。

这是我的代码:

<script>
$(document).ready(function(){
$(".service").click(function(){
$(".service_description").toggle(1000);
});
});
</script>

<div class="service_list">
<button class="service">Floors</button>
<div class="service_description">dsggafgg</div>
<div class="service">Roofs</div>
<div class="service_description">dsggafgg</div>
<div class="service">Siding</div>
<div class="service_description">dsggafgg</div>
<div class="service">Paint</div>
<div class="service_description">dsggafgg</div>
<div class="service">Kitchen Remodels</div>
<div class="service_description">dsggafgg</div>
</div>

我创建了一个 fiddle ,但我不确定如何添加到 Jquery 库中,自从我上次使用它以来它已经发生了变化。

https://jsfiddle.net/huj2fkra/#&togetherjs=P1EtO37uUE

如何对每项服务进行单选?我真的不想用一堆不同的 div 创建一个切换脚本,因为如果选择了一个服务,我希望在我点击另一个服务时该描述消失。

有没有人有什么想法?

最佳答案

我会将每个服务包装在一个 div 中,如下所示:

<div class="service-wrapper">
<div class="service-title">Floors</div>
<div class="service-description">...</div>
</div>
<div class="service-wrapper">
<div class="service-title">Roofs</div>
<div class="service-description">...</div>
</div>
<div class="service-wrapper">
<div class="service-title">Siding</div>
<div class="service-description">...</div>
</div>
<div class="service-wrapper">
<div class="service-title">Paint</div>
<div class="service-description">...</div>
</div>
<div class="service-wrapper">
<div class="service-title">Kitchen Remodels</div>
<div class="service-description">...</div>
</div>

然后,您可以这样做 ( https://jsfiddle.net/3ofLfa4t/ ):

$('.service-wrapper').click(function() {
var thisDescription = $('.service-description', $(this));

// Hide all other descriptions
$('.service-description').not(thisDescription).hide();

// Toggle (show or hide) this description
thisDescription.toggle();
});

$('.service-description', $(this)) 调用只是告诉 jQuery 只查找包装器内的 .service-description 元素单击,忽略包装外的那些。

关于javascript - 显示和隐藏元素列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34500918/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com