我一直在尝试向我正在处理的网站添加特定的手风琴，但是，当单击"+"以打开和显示内容时，这不会发生。手风琴选项卡都保持关闭状态，但每当我按下手风琴标题"+'时，屏幕都会跳到顶部。任何帮助将不胜感激。
代码如下：
.accord-tab-box {
padding-top: 40px;
padding-bottom: 20px;
}
.accordion-box {
margin-bottom: 20px;
}
.accord-elem {
margin-bottom: 20px;
}
.accord-title {
padding: 16px 14px;
border: 1px solid #dbdbdb;
position: relative;
}
.accord-title h5 {
padding-right: 48px;
}
.accord-title h5 i {
color: #007aff;
font-size: 20px;
vertical-align: middle;
margin-right: 12px;
}
a.accord-link {
display: inline-block;
position: absolute;
width: 46px;
height: 100%;
top: 0;
right: 0;
border-left: 1px solid #dbdbdb;
background: url('/Content/myTemplate/images/add.png') center center no-repeat;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.accord-elem.active a.accord-link {
background: url('/Content/myTemplate/images/add.png') center center no-repeat;
}
a.accord-link.opened {
background: url('/Content/myTemplate/images/substract.png') center center no-repeat;
}
.accord-content {
display: none;
padding: 22px;
border: 1px solid #dbdbdb;
border-top: none;
overflow: hidden;
}
.accord-content span.image-content {
display: inline-block;
float: left;
width: 68px;
height: 68px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
margin-right: 22px;
background: #007aff;
}
.accord-content span.logo-content {
display: inline-block;
float: left;
width: 110px;
margin-right: 15px;
}
.accord-content span.image-content i {
color: #fff;
font-size: 30px;
text-align: center;
width: 100%;
line-height: 68px;
vertical-align: middle;
}
.accord-content span.logo-content i {
color: #fff;
font-size: 30px;
text-align: center;
width: 100%;
line-height: 68px;
vertical-align: middle;
}
.accord-elem.active .accord-content {
display: block;
}
.why-convertible-box {
padding-top: 60px;
}
.why-convertible-box h1 {
margin-bottom: 10px;
}
.why-convertible-box h1 span {
font-weight: 600;
}
.why-convertible-box h1 i {
color: #0a9dbd;
margin-left: 10px;
}
.why-convertible-box p {
margin-bottom: 15px;
}
.why-convertible-box p a {
color: #0076f9;
font-weight: 700;
}<div class="why-convertible-box">
<div class="container">
<h1>Why choose <span>PosWorx</span><i class="fa fa-question-circle"></i></h1>
</div>
</div>
<div class="accord-tab-box">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="accordion-box">
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-money fa-fw"></i>Sales</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Posworx offers rental packages which make our system both affordable and hassle-free. With minimal upfront costs and an all-inclusive monthly rental, we've got you covered.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-star fa-fw"></i>Returns</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Posworx consistently strives to deliver a robust hardware and software solution that is both industry leading and hardened.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-wrench fa-fw"></i>On-Site Support</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>We offer professional onsite support with all our contract options with the highest technician to customer ratio in the country you are assured prompt, professional service always.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-tty fa-fw"></i>Laybyes</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Helpdesk service 24/7/365 which caters for telephone and remote network support.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-desktop fa-fw"></i>Bio Metric Support</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Unlimited classroom environment training sessions in our main centres ensures you get the most from your investment.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-thumbs-up fa-fw"></i>User-Friendly Solution</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Our product has evolved through constant feedback from the industry over the past 30 years. This has resulted in a user-friendly software solution that is both practical and functional.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion-box">
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-calculator fa-fw"></i>Inter Branch Transfers</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Easily manage the core element of your business by tracking stock shortages as well as optimising your order levels to ensure maximum profit.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-bar-chart fa-fw"></i>Time and Attendance</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>To help you improve your operational efficiencies through analysis.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-exchange fa-fw"></i>Easy Integration</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Posworx systems easily integrate with well over 25 programs to ensure you can provide your customs with more services on payment options, loyalty programs and so much more while making your life easier.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-tablet fa-fw"></i>Posworx Mobile</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>We utilize the latest technology to ensure that all your vital store information is available to you anytime, anywhere with our WEB APP and SMS feature.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-cloud fa-fw"></i>Backup to Cloud</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Posworx strives for constant improvement, innovation and integration.</p>
</div>
</div>
<div class="accord-elem">
<div class="accord-title">
<h5><i class="fa fa-info-circle fa-fw"></i>Posworx Interactive Reports</h5>
<a class="accord-link" href="#"></a>
</div>
<div class="accord-content">
<p>Posworx has a rapidly growing customer base of well over 5000 customers incorporating over 60 national franchises and an international footprint.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>你从 planung-berlin.de 那里得到的代码吗？请记住也复制javascript文件，否则代码将无法正常工作。
试试这个：
JavaScript：
$(document).ready(function($) {
var clickElem = $('a.accord-link');
clickElem.on('click', function(e){
e.preventDefault();
var $this = $(this),
parentCheck = $this.parents('.accord-elem'),
accordItems = $('.accord-elem'),
accordContent = $('.accord-content');
if( !parentCheck.hasClass('active')) {
accordContent.slideUp(400, function(){
accordItems.removeClass('active');
});
parentCheck.find('.accord-content').slideDown(400, function(){
parentCheck.addClass('active');
});
} else {
accordContent.slideUp(400, function(){
accordItems.removeClass('active');
});
}
});