单击切换时交换图像答案

【问题标题】：Swapping an image when a toggle has been clicked on单击切换时交换图像
【发布时间】：2015-12-30 08:05:39
【问题描述】：

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

这是一个sn-p。单击其中一个服务名称以查看描述展开。

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

【问题讨论】：

加号在哪里？减号在哪里？它们是图像吗？
是的，加号是图像。它位于第一个服务名称旁边。我只是没有将它们全部添加到 sn-p 中。减号是：img src="realtorcatch.com/icons/minusSymbol.png"
我认为只需将包含单击时加号图像的 img 元素的 src 属性更改为减号图像的来源即可提供您正在寻找的功能。
您能否提供一个示例或链接，我不确定您的意思。
这很容易做到，但是你需要稍微改变你的脚本

标签： javascript jquery html css toggle

【解决方案1】：

这是工作示例，我更改了一点 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

【讨论】：

我的回答比较简单：'(

【解决方案2】：

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

您可以将图标添加为插入.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>

【讨论】：

这就像 99% 完美。如何在加号和服务标题之间添加填充？我之前在 css 文件中使用背景图像时遇到过这个问题。我不知道如何在图像的右侧添加填充。
您可以只为伪元素添加填充.. .service_title:before { padding-right: 6px; }..
太棒了！谢谢！所以你只是在类之间切换来改变图像？
@Becky 是的。在这种情况下，.closed 类正在被切换。它决定显示哪个背景图像。
:Before css 元素有什么作用？

【解决方案3】：

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

假设您使用图像，只需添加一个您可以在需要时查询的数据属性，就像这样......

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>

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

【讨论】：