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>

我创建了一个小提琴，但我不确定如何添加Jquery库，自上次使用它以来它已经发生了变化。

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

我如何单独提供每项服务？我真的不想用一堆不同的div制作一个切换脚本，因为如果选择了一个服务，我希望如果我点击另一个服务那个描述就会消失。

有没有人有任何想法？

Answer 1

我会将每个服务包装在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 2

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

Answer 3

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

应该做的伎俩

显示和隐藏项目列表

3 个答案: