Question

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

这是一个片段。单击其中一个服务名称以查看说明扩展。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 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

Answer 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>

Answer 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>

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

单击切换时交换图像

3 个答案:

更新示例：