如何在没有toggleClass的情况下制作切换器

Question

我尝试制作类似hamburger的内容，我想first click hamburger设置css（加号），但second click删除{{ 1}}，我在css中设置（减号）（想做切换器之类的东西）。我试图使用first click jquery-function，但是它不起作用，而是我的{{1消失了。如何在没有toogle并进行额外课程的情况下制作切换台？所有想做的都是改变.panel-title和toogleClass，如plus to minus minus to plus

时切换器

click

collapse panel

$(function() {

  $(".panel-title").click(function() {
    $('.panel-title button span:first-of-type').css({"top": "50%", "bottom": "50%"})
  });

});

Answer 1

不要使用javascript。只需将您的样式设置为添加到父级的collapsed类：

.panel-heading {
    cursor: pointer;
    transition: color .15s ease-in-out;
}

.panel-heading:hover {
    color: #5bb8e1;
}

.panel-heading h4 {
    font-weight: 400;
}

.panel-title {
    position: relative;
}

.panel-title button {
    background: transparent;
    width: 22px;
    height: 22px;
    border: 0;
    position: relative;
    float: right;
}


.panel-title button span {
    content: '';
    transition: .3s linear;
    position: absolute;
    background: #b9b9b9;
}

.panel-title button span:first-of-type {
    top: 25%;
    bottom: 25%;
    width: 5%;
    left: 48%;
}

.panel-title button span:last-of-type {
    left: 25%;
    right: 25%;
    height: 5%;
    top: 48%;
}

.panel-heading:not(.collapsed) .panel-title button span:first-of-type,
.panel-title button:hover span:first-of-type {
    top: 50%;
    bottom: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel-group">
  <div class="panel panel-default">
    <div data-toggle="collapse" href="#collapse1" class="panel-heading">
      <h4 class="panel-title">
        Job Type
        <button>
          <span></span>
          <span></span>
        </button>
      </h4>
    </div>
    <div id="collapse1"class="panel-collapse collapse">
      <div class="panel-body">
        <ul>
          <li><input id="job-types-1"type="checkbox"><label for="job-types-1">Full-time</label></li>
          <li><input id="job-types-2"type="checkbox"><label for="job-types-2">Contract</label></li>
          <li><input id="job-types-3"type="checkbox"><label for="job-types-3">Part-time</label></li>
          <li><input id="job-types-4"type="checkbox"><label for="job-types-4">Freelance</label></li>
          <li><input id="job-types-5"type="checkbox"><label for="job-types-5">Internship</label></li>
        </ul>
      </div>
    </div>
  </div>
</div>