我正在使用一个平滑滚动的功能，这似乎干扰了常见问题解答手风琴。打开或关闭选项卡跳转到页面顶部的任何问题选项卡时。离开href *时
return this.find('a[href*="#"]').click(function(f) {
空手风琴有效但平滑滚动被禁用。无法找到使两种功能同时工作的方法。
如何防止常见问题解答标签跳到顶部并在实际位置打开而不会失去平滑滚动？
(function(a, c) {
var b = (function() {
var d = c(a.documentElement),
f = c(a.body),
e;
if (d.scrollTop()) {
return d
} else {
e = f.scrollTop();
if (f.scrollTop(e + 1).scrollTop() == e) {
return d
} else {
return f.scrollTop(e)
}
}
}());
c.fn.smoothScroll = function(d) {
d = ~~d || 600;
return this.find('a[href*="#"]').click(function(f) {
var g = this.hash,
e = c(g);
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
if (e.length) {
f.preventDefault();
b.stop().animate({
scrollTop: e.offset().top
}, d, function() {
location.hash = g
})
}
}
}).end()
}
}(document, jQuery));
我的HTML：
<div class="container">
<br />
<br />
<br />
<br />
<div class="panel-group" id="accordion">
<div class="faqHeader">General questions</div>
<div class="panel panel-default collapse">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">How fit and Experienced do I need to be for the Cycling Escapes?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
No, you don’t need to be a pro to ride our Cycling Escapes.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">How serious is the cycling?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Our Escapes are all about cycling, of course, but they are not stage races.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFourteen">Do I have to ride every day?</a>
</h4>
</div>
<div id="collapseFourteen" class="panel-collapse collapse">
<div class="panel-body">
Absolutely not. You can take as many days off as you want.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Can you help me with my fitness preparation?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Sure we can.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Is there a minimum age requirement?</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Yes, there is.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">How big are the groups?</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
The groups are limited to 16 riders.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Can I rent a bike and/or a GPS navigation system with you?</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">
At the moment we cannot offer rentals for bikes or GPS navigation system. Sorry.
</div>
</div>
</div>
<br>
<div class="faqHeader">Accommodation</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">Do I have to share my accomomodation with another rider?</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
All the prices of our Escapes are based on two people sharing a room.
<br />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">Is my bike safely stored when I'm not riding?</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
There are a number of reasons why you should join us:
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSixteen">Can you accommodate special dietary needs?</a>
</h4>
</div>
<div id="collapseSixteen" class="panel-collapse collapse">
<div class="panel-body">
We will do our very best to ensure that your dietary needs are met.
</div>
</div>
</div>
<br>
<br>
<div class="faqHeader">Prices</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">How much does it cost?</a>
</h4>
</div>
<div id="collapseNine" class="panel-collapse collapse">
<div class="panel-body">
You can find the cost for the individual Escapes in the 'ESCAPES' section of the website.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTen">What is included in the Escape price?</a>
</h4>
</div>
<div id="collapseTen" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Accommodation for 7 or 10 nights in a 3 to 5 star hotel.</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThirteen">What is NOT included in the Escape price?</a>
</h4>
</div>
<div id="collapseThirteen" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Flights and/or train travels.</li>
</ul>
</div>
</div>
</div>
<br>
<div class="faqHeader">Bookings</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeventeen">How do I book?</a>
</h4>
</div>
<div id="collapseSeventeen" class="panel-collapse collapse">
<div class="panel-body">
Bookings can be made via the 'BOOKINGS' section of the website.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEighteen">Can I cancel my booking?</a>
</h4>
</div>
<div id="collapseEighteen" class="panel-collapse collapse">
<div class="panel-body">
Of course you can. You can cancel your booking at any time, but be aware that charges will apply and refunds are based on a sliding scale.
</div>
</div>
</div>
<br>
<div class="faqHeader">Travel/Transportation</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">Can you help me with travel arrangements?</a>
</h4>
</div>
<div id="collapseEleven" class="panel-collapse collapse">
<div class="panel-body">
Unfortunately, we are not able to help you with any travel arrangements outside our Escapes.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve">Do I need travel insurance?</a>
</h4>
</div>
<div id="collapseTwelve" class="panel-collapse collapse">
<div class="panel-body">
Yes, we strongly recommend that you take out a travel insurance as this is not included in any of our Escape prices.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFifteen">What travel documents do I need?</a>
</h4>
</div>
<div id="collapseFifteen" class="panel-collapse collapse">
<div class="panel-body">
A passport or an identity card is the most obvious.
</div>
</div>
</div>
<br>
<div class="faqHeader">Hey!</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseNineteen">Why didn't you answer my question?</a>
</h4>
</div>
<div id="collapseNineteen" class="panel-collapse collapse">
<div class="panel-body">
Sorry. So many questions, so many answers...
</div>
</div>
</div>
</div>
</div>
<style>
.faqHeader {
font-size: 27px;
margin: 15px;
text-transform: uppercase;
}
.panel-heading [data-toggle="collapse"]:after {
font-family: 'FontAwesome';
content: "\f138"; /* "play" icon; old icon: Glyphicons Halflings, e072*/
float: right;
color: #F58723;
font-size: 30px;
line-height: 27px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after {
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
color: #454444;
}
答案 0 :(得分：0)
您可以添加条件以检查其是否没有类accordion-toggle来继续使用您函数中的其他内容。
c.fn.smoothScroll = function(d) {
d = ~~d || 600;
return this.find('a[href*="#"]').click(function(f) {
if(!$(this).hasClass('accordion-toggle')) {
var g = this.hash,
e = c(g);
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
if (e.length) {
f.preventDefault();
b.stop().animate({
scrollTop: e.offset().top
}, d, function() {
location.hash = g
})
}
}
}
}).end()
}