显示和隐藏项目列表

Question

我正在尝试制作一个页面，您可以在其中点击某项服务，然后会显示其描述。我有点明白了，但与此同时，它离我想要的还很远。

现在，我只有针对所有这些的服务 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制作一个切换脚本，因为如果选择了一个服务，我希望在我点击另一个服务时该描述消失。

有没有人有什么想法？

Answer 1

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

应该可以解决问题

Answer 2

我会将每项服务包装在 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 元素，忽略包装外的元素。

Answer 3

可以使用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);   
        }
    });
});

显示和隐藏项目列表

Showing and hiding a list of items

html

javascript

css

jquery

show-hide