通过改变折叠时改变加号到减号：之前

Question

正如标题所暗示的那样，我想通过改变加号来改变加号到减号：之前（通过显示无或其他东西使其看起来像一个减号。）目前我的代码工作和崩溃如预期。演示here。

HTML

<div class="box">
  <div class="box-item">
    <p>Item #1<span class="plus"></span></p>
    <ul>
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #2<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #3<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #4<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #5<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>
</div>

的jQuery

$(document).ready(function () { 
  $('.box p').click(function(){
    var target = $(this).parent().children('.box ul');
    if (!target.is(":visible")) {
      $('.box ul').slideUp();
      $(target).slideDown();
    } else {
      $(target).slideUp();
    }
  });
});

Answer 1

考虑到你有一个minus类，它的工作方式与plus类相似，但会显示一个减号。

$(document).ready(function () { 
  $('.box p').click(function(){
      var target = $(this).parent().children('.box ul');
      if (!target.is(":visible")) {
        $('.box ul').slideUp();
        $(target).slideDown();
        $(this).children('span').removeClass('plus').addClass('minus');
      }
      else {
        $(target).slideUp();
        $(this).children('span').removeClass('minus').addClass('plus);
      }
    });
});

顺便说一下，你为什么不简单地将跨度的css content属性设置为＆＃39; +＆＃39; （或＆＃39; - ＆＃39;）？

Answer 2

您需要添加课程minus，然后在项目上加上每个展开折叠事件加上此项。

codepen

＆＃13;

＆＃13;

$(document).ready(function () { 
  $('.box p').click(function(){
      var target = $(this).parent().children('.box ul');
      if (!target.is(":visible")) {
        $('.box ul').slideUp();
        $(target).slideDown();
        $(this).children(".box .plus").toggleClass("plus, minus");
      }
      else {
        $(target).slideUp();
        $(this).children(".box .plus").toggleClass("plus, minus");
      }
    });
});

＆＃13;

.box {
  font-family: Arial, sans-serif;
  border-radius: 2px;
  margin-bottom: 30px;
  padding: 20px;
  color: #444;
  background-color: #EEE;
  width: 400px;
}
.box p {
    color: #;
    display: block;
    font-size: 22px;
    text-transform: uppercase;
    cursor: pointer;
}
.box ul {
    display: none;
}
.box li {
    color: #666;
    padding-left: 12px;

}
.box .plus, .box .minus {
     color: #3BB1D0;
    cursor: pointer;
    float: right;
    position: relative;
    right: 14px;
    bottom: -6px;
}
.box .plus:before {
    content: '';
    display: block;
    left: 7px;
    width: 4px;
    height: 21px;
    margin-top: 0;
    background: #444;
    border-radius: 2px
}
.box .plus:after {
    content: '';
    display: block;
    left: -8px;
    width: 21px;
    height: 4px;
    top: 8px;
    background: #444;
    border-radius: 2px;
    position: absolute
}
.box .minus:before {
    content: '';
    display: block;
    left: 7px;
    width: 4px;
    height: 0;
    margin-top: 0;
    background: #444;
    border-radius: 2px
}
.box .minus:after {
    content: '';
    display: block;
    left: -8px;
    width: 21px;
    height: 4px;
    top: 8px;
    background: #444;
    border-radius: 2px;
    position: absolute
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="box-item">
    <p>Item #1<span class="plus"></span></p>
    <ul>
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #2<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #3<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #4<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>

  <div class="box-item">
    <p>Item #5<span class="plus"></span></p>
    <ul style="">
      <li>List Item #1</li>
      <li>List Item #2</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;