任何人都有任何想法，我在这里做错了什么？我试图改变标题内的i元素上的图标类但不打球。
目前它是怎样的，它只是为了一些奇怪的原因在H3的开头添加了减号......它似乎在控制台中它向H3添加了icon-minus和icon-plus而没有改变i类。
**更新**
解决了这个问题，它现在没有正确切换图标，但它正在改变。
/* Accordion JS */
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');
//Set The Accordion Content Width
//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');
// The Accordion Effect
$('.accordion-header').click(function () {
if ($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).find('i').toggleClass('icon-plus').toggleClass('icon-minus');
$(this).next().slideToggle().toggleClass('open-content');
} else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).find('i').toggleClass('icon-minus').toggleClass('icon-plus');
$(this).next().slideToggle().toggleClass('open-content');
}
});/* FAQ Page */
#accordion-container {
margin-top: 60px;
}
.accordion-header {
font-size: 1.4em;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 10px;
cursor: pointer;
}
.accordion-header i {
float: right;
}
.accordion-content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Frequently Asked Questions</h1>
<h2>Need some help? Your at the right place</h2>
<div id="accordion-container">
<h3 class="accordion-header">1. CAN I CHANGE MY ORDER IF I CHANGE MY MIND? <i class="icon-minus"></i></h3>
<div class="accordion-content">
<p>Certainly, you can change your order at no cost providing it has not been filled or despatched already. Should you wish to make a change then please contact us via phone or email quoting your order number.</p>
</div>
<h3 class="accordion-header">2. WHAT IS YOUR RETURNS POLICY? <i class="icon-plus"></i></h3>
<div class="accordion-content">
<p>We encourage you to feel safe with your purchase decision and we back our products and quality. We offer a 7 DAY MONEY BACK GUARANTEE - All orders place with Ambient Lounge (UK) Ltd are covered by a 7 day money back guarantee. If within 7 days of receipt you are not satisfied with your order, you are entitled to an identical replacement (if in stock) or a refund of the cost of the goods (excluding all delivery costs) providing the goods have not been used. Goods purchased on our website can be returned for a full refund under our refund policy provided that you have first contacted us within 7 days of the purchase and the goods are then returned in a condition deemed suitable by us for resale. Please note that we cannot refund any cost for postage that you may have paid, unless we have sent you an item incorrectly or the item is deemed to be faulty. Please note, we individually check all returns and if we consider the fault to be as a result of self-damage, then a refund will not be given.</p>
<p>For your own protection when returning any goods, we suggest that you use recorded delivery, requiring our signature upon receipt of the goods, as we will not issue refunds for any goods that fail to reach us. Your statutory rights are not affected. Please contact us before any return. Returns should be sent to: Well House, Wartling Road, Wartling, East Sussex, BN27 1RX</p>
</div>
<h3 class="accordion-header">3. WHAT HAPPENS IF THE BEAN BAG I WANT IS OUT OF STOCK? <i class="icon-plus"></i></h3>
<div class="accordion-content">
<p>Demand for our bean bags has been very high and despite our best intentions, we may temporarily be out of stock of some items or colours. Our automated ordering service will not allow orders to process when there are stock-outs. Please contact us to find out how long we may be out of stock and we will get back to you within 24 hours.</p>
</div>
<h3 class="accordion-header">4. IS IT SAFE TO BUY ONLINE WITH AMBIENT LOUNGE? <i class="icon-plus"></i></h3>
<div class="accordion-content">
<p>Your purchase is secure with us. Ambient Lounge is an online retailer of designer bean bags. We aren't a bank. That is why we use Australia's most trusted payment provider - SagePay & PayPal to process our transactions. We have full SSL certification please take note of the padlock on the ordering page.</p>
</div>
<h3 class="accordion-header">5. WHAT IF I WANT TO PURCHASE IN QUANTITY? <i class="icon-plus"></i></h3>
<div class="accordion-content">
<p>We have many requests for functions and multi-purchases. We offer discount on such bulk purchases to private consumers and non-wholesale businesses. If you would like to enquire about a bulk discount, please use our contact form only orders of 10 or more will be considered for any discounts.</p>
</div>
</div>
答案 0 :(得分：1)
问题是，当点击.inactive-header时，你不能将.icon-plus转换为.icon-minus，.active-header。要解决此问题，请尝试添加
$('.active-header').find('i').toggleClass('icon-plus').toggleClass('icon-minus');
前
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
答案 1 :(得分：0)
您应该删除所有icon-minus类，并将其替换为icon-plus类。这意味着当您点击某些内容时，所有链接都会有icon-plus。所以现在你需要做的只是toggle当前所选元素的类。
在您执行任何其他操作之前，请在点击事件中调用此方法。
$('i').removeClass('icon-minus').addClass('icon-plus');
现在只需像这样更新你的条件
if ($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).find('i').toggleClass('icon-plus').toggleClass('icon-minus');
$(this).next().slideToggle().toggleClass('open-content');
} else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).find('i').addClass('icon-plus');
$(this).next().slideToggle().toggleClass('open-content');
}
这里有工作 JSFIDDLE ，并添加了一些样式。