Javascript 显示和隐藏项目列表

我正在尝试创建一个页面，在那里可以单击一个服务，然后显示它的描述。我有点明白了，但同时，它离我想要的地方还很远

现在，我只需要一个services div来表示所有这些，然后是一个services\u 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>

$（文档）.ready（函数（）{
$（“.service”）。单击（函数（）{
$（“.service_description”）.toggle（1000）；
});
});
地板
dsggafgg
屋顶
dsggafgg
侧线
dsggafgg
油漆
dsggafgg
厨房改造
dsggafgg

我创建了一个fiddle，但是我不确定如何添加Jquery库，自从上次使用它以来，它已经改变了

我怎样才能在每项服务中单选一项？我真的不想用一堆不同的div创建切换脚本，因为如果选择了一个服务，我希望在单击另一个服务时该描述消失

有人有什么想法吗

$(".service").click(function(){
    $(this).find(".service_description").toggle(1000);
});

---

如果要做到这一点

我会将每个服务包装在一个

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>

---

$（'.service description'，$（this））

调用只告诉jQuery只查找单击的包装内的

.service description

元素，忽略包装外的元素。

您可以使用slideUp，slideDown：

$(document).ready(function () {
    $(".service_list .service_description").hide();
    $(".service").click(function(){
        $(this).next(".service_description").siblings('.service_description').slideUp(1000);
        if ($(this).next(".service_description").is(":visible")) {
            $(this).next(".service_description").slideUp(1000); 
        }else{
            $(this).next(".service_description").slideDown(1000);   
        }
    });
});

---

是否要切换单击的服务的说明？在该div的旁边。如果是这样的话，应该可以使用$（this）.next（“.service_description”）。toggle（1000）；假设您单击服务“屋顶”。“屋顶”的描述是“我们会让你的屋顶看起来完美！”。我想把这个问题提出来。然后，如果有人点击壁板，我希望屋顶描述消失，然后壁板一出现。所以我会有多个服务包装，服务标题和服务描述div？或者您是说有一个服务包装div和多个服务标题/描述div？很抱歉，我对你的意思有点困惑。如果你这样做的话，你会希望每个服务都有一个

服务包装器。我更新了我的答案，以包括你的数据作为例子。这肯定更接近我所寻找的。所有描述仍然显示在页面加载上。我想把它们藏起来。然后假设楼层服务被点击，描述显示，如果我再次点击楼层，我希望描述消失。我如何解决这些问题？你可以使用css
.service description{display:none；}
我自己也有问题：）-现在在javascript面板的设置图标中。
$(document).ready(function () {
    $(".service_list .service_description").hide();
    $(".service").click(function(){
        $(this).next(".service_description").siblings('.service_description').slideUp(1000);
        if ($(this).next(".service_description").is(":visible")) {
            $(this).next(".service_description").slideUp(1000); 
        }else{
            $(this).next(".service_description").slideDown(1000);   
        }
    });
});