0
我試圖使像hamburger和我在first click在hamburger想設定css（加號），但在second click刪除css，我在first click（減號）設置（希望這有點像切換）。我試圖使用toogle jquery函數，但它不起作用，而是我的.panel-title消失。我怎樣才能做切換器，沒有toogleClass和額外的課程？所有想要做的是改變plus to minus和minus to plus像切換，當click在collapse panel如何使切換而不toggleClass
$(function() {
$(".panel-title").click(function() {
$('.panel-title button span:first-of-type').css({"top": "50%", "bottom": "50%"})
});
});.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%;
}<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>
您的片段基本上是無用的。你沒有導入jQuery，所以它返回'$'未定義。代碼片段不僅僅是爲了顯示代碼，它是爲了運行它。請轉到代碼段的HTML部分並添加''。 –
我有很多縮小的代碼，我根本無法加載它 –
你可以發佈你想要完成的任務嗎？你的代碼和你的描述都不是非常簡潔。也許這樣？ https://jsfiddle.net/freer4/aebb938s/ –