单击切换后交换图像

Becky 发表于 Dev

贝基

我在以下代码中向其中一个服务标题添加了加号。有人通知我，当单击该服务时，应在其前面放一个减号，以表明可以将其最小化。我不确定在扩展说明后如何换出加号。有人对我该怎么做有任何想法吗？

这是一个片段。单击服务名称之一以查看描述扩展。

$('.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.slideToggle(500);
});

.service_wrapper {
  border: 1px solid black;
  margin: 15px;
  width: 20%;
}
.service_list {
  margin-left: 20%;
}
.service_title {
  padding: 15px 12px;
  margin: 0;
  font-weight: bold;
  font-size: 1em;
}
.service_title:hover {
  background-color: gray;
  color: blue;
  cursor: pointer;
}
.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
  <div class="service_wrapper">
    <div class="service_title">
      <img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
    <div class="service_description">The best floors!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Roofs</div>
    <div class="service_description">Your roof will be perfect!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Siding</div>
    <div class="service_description">mmmm siding.</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Paint</div>
    <div class="service_description">Fabulous paint!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Kitchen Remodels</div>
    <div class="service_description">Pretty kitchen.</div>
  </div>
</div>

乔什·克罗齐耶（Josh Crozier）

我建议您简单地切换一个类来实现这一目标。

您可以将图标添加为插入到.service_title元素中的伪元素的背景图像。然后，您只需切换一个类即可更改图标。相应地更新背景图像URL。请参阅更新后的示例以获取修改后的jQuery；仍然只有5行。

更新的示例：

$('.service_wrapper').click(function() {
  var thisDescription = $('.service_description', $(this));
  $('.service_description').not(thisDescription).hide().parent().removeClass('closed');
  thisDescription.slideToggle(500).parent().toggleClass('closed');
});

.service_wrapper {
  border: 1px solid black;
  margin: 15px;
  width: 20%;
}
.service_list {
  margin-left: 20%;
}
.service_title {
  padding: 15px 12px;
  margin: 0;
  font-weight: bold;
  font-size: 1em;
}
.service_title:before {
  content: '';
  background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
  width: 10px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
}
.closed .service_title:before {
  background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
  background-color: gray;
  color: blue;
  cursor: pointer;
}
.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
  <div class="service_wrapper">
    <div class="service_title">Floors</div>
    <div class="service_description">The best floors!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Roofs</div>
    <div class="service_description">Your roof will be perfect!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Siding</div>
    <div class="service_description">mmmm siding.</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Paint</div>
    <div class="service_description">Fabulous paint!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Kitchen Remodels</div>
    <div class="service_description">Pretty kitchen.</div>
  </div>
</div>