单击切换按钮时交换图像

Question

我有以下代码，我在其中一个服务标题中添加了一个加号。有人告诉我，当单击该服务时，我应该用一个减号代替它，以表明它可以最小化。我不确定如何在扩展描述后换掉加号。有人知道我该怎么做吗？

这是一个片段。单击其中一个服务名称可展开描述。

$('.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>

Answer 1

您可以在点击绑定中更改它...

比方说你用的是图片，加个data-attribute你需要的时候可以查询，像这样...

HTML

<div class="service_wrapper">
    <img data-state="plus" class="state" src="plus.png" alt="More"/>
    <div class="service_title">Paint</div>
    <div class="service_description">Fabulous paint!</div>
</div>

JS

$('.service_wrapper').click(function() {
    var state = $(this).find('.state');
    if(state.data('state') == 'plus')
        state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
    else
        state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});

Answer 2

这是工作示例，我稍微更改了 de html 和 Js

    $('.service_wrapper').click(function() {

          var thisDescription = $('.service_description', $(this));

        var t = $(this);
        if(t.hasClass('open'))
          {
            t.removeClass('open');
            t.find('.status').html("+");
          }else {
            t.addClass('open');
            t.find('.status').html("-");

          }

          // Hide all other descriptions
          $('.service_description').not(thisDescription).hide();

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

the working example

Answer 3

我建议简单地切换 class 来实现这一点。

您可以将图标添加为插入 .service_title 元素的伪元素的背景图像。然后您可以简单地切换 class 以更改图标。相应地更新背景图片 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>

单击切换按钮时交换图像

Swapping an image when a toggle has been clicked on

html

javascript

css

jquery

toggle

更新示例：