在导航栏中使用手风琴获得问题
我创建了带有正负的手风琴，如下图所示。
但是我点击了第一个手风琴，然后其他手风琴div正在发出咕噜声并获得不需要的空间，如下图所示。
参考链接（请查看以下链接以获取问题示例代码）： bootsnipp.com/nageswar/snippets/e3RBD
我的代码：
body {
font-family: 'open sans';
}
#accordion-first .accordion-group {
margin-bottom: 10px;
}
#accordion-first .accordion-heading,
#accordion-first .accordion-toggle:hover,
#accordion-first .accordion-heading .accordion-toggle.active {
background: none repeat scroll 0% 0% transparent;
}
#accordion-first .accordion-heading {
border-bottom: 0px none;
font-size: 16px;
}
#accordion-first .accordion-heading .accordion-toggle {
display: block;
cursor: pointer;
padding: 5px 0px !important;
color: #222;
outline: medium none !important;
text-decoration: none;
}
#accordion-first .accordion-heading .accordion-toggle.active em {
background-color: #F7C221;
}
#accordion-first .accordion-heading .accordion-toggle > em {
background-color: #222;
border-radius: 100px;
color: #FFF;
font-size: 14px;
height: 32px;
line-height: 32px;
margin-right: 10px;
text-align: center;
width: 32px;
}
HTML：
<ul class="dropdown-menu mega-dropdown-menu" style="overflow-y: scroll; padding: 1% 4%; overflow-x: hidden; display: none; opacity: 1;">
<li class="col-sm-8">
<ul>
<li class="dropdown-header" style="color: #323232;font-weight:bold;padding-left:15px;">Services</li>
<li class="col-sm-12">
<div id="accordion-first accordion-custom" class="clearfix">
<div class="accordion" id="accordion2">
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" aria-expanded="false">
<em class="icon-fixed-width fa fa-plus" href="#collapseOne"></em>
</a>
<a href="http://www.google.com">
<i class="fa fa-gears service-menu-icon"></i>
</a>
</div>
<div style="height: 0px;" id="collapseOne" class="accordion-body collapse" aria-expanded="false">
<div class="accordion-inner">
<ul>
<li class="dropdown-header">Software Development Services</li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-software-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Software Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-web-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Web Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-mobile-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Mobile Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-saas-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Saas Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-software-testing-quality-assurance-qa-service.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Software Testing Quality Assurance</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-cloud-computing-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Cloud Computing Application Development</a></li>
<li class="dropdown-header">IT Solution by Platforms</li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-android-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Android Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-azure-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Azure Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/c-plus-plus-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> C/C++ Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/html5-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> HTML5 Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-ios-ipad-iphone-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> iOS Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-java-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Java Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-linux-unix-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Linux/UNIX Software Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-dot-net-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> .NET Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-php-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> PHP Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-python-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Python Application Development</a></li>
<li><a href="http://www.example.net/it-outsourcing-services/outsource-ruby-on-rails-ror-web-application-development-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Ruby on Rails Application Development</a></li>
</ul>
</div>
</div>
<br style="clear:both">
</div>
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo" aria-expanded="false">
<em class="icon-fixed-width fa fa-plus"></em>
</a>
<a href=""><i class="fa fa-gears service-menu-icon"></i></a>
</div>
<div style="height: 0px;" id="collapseTwo" class="accordion-body collapse" aria-expanded="false">
<div class="accordion-inner">
<ul>
<li>
<a href="http://www.example.net/finance-accounting-bpo/outsource-accounts-payable-services.php"> <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Accounts Payable</a>
</li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-accounts-receivable-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Accounts Receivable</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-bookkeeping-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Accounting and Bookkeeping</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-financial-analysis-reporting-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Financial Analysis Reporting</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-cfo-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> CFO Services</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-insurance-claims-processing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Insurance Claims Processing</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-mortgage-process-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Mortgage Process Services</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-payroll-processing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Payroll Processing Services</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-tax-preparation-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Tax Preparation Services</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-real-estate-title-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Real Estate Title Services</a></li>
<li><a href="http://www.example.net/finance-accounting-bpo/outsource-record-to-report-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Record to Report Services</a></li>
</ul>
</div>
</div>
<br style="clear:both">
</div>
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree" aria-expanded="false">
<em class="icon-fixed-width fa fa-plus"></em>
</a>
<a href=""><i class="fa fa-file-text service-menu-icon"></i></a>
</div>
<div style="height: 0px;" id="collapseThree" class="accordion-body collapse" aria-expanded="false">
<div class="accordion-inner">
<ul>
<li><a href="http://www.example.net/outsource-data-entry-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Data Entry</a></li>
<li><a href="http://www.example.net/data-entry/outsource-data-processing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Data Processing</a></li>
<li><a href="http://www.example.net/data-entry/outsource-data-conversion-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Data Conversion</a></li>
<li><a href="http://www.example.net/data-entry/outsource-ocr-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> OCR</a></li>
<li><a href="http://www.example.net/data-entry/outsource-data-cleansing-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Data Cleansing</a></li>
<li><a href="http://www.example.net/data-entry/outsource-database-development-migration-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Database Management</a></li>
<li><a href="http://www.example.net/outsource-catalog-management-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Catalog Management</a></li>
<li><a href="http://www.example.net/outsource-data-management-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Data Management</a></li>
<li><a href="http://www.example.net/outsource-research-data-mining-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Data Mining</a></li>
</ul>
</div>
</div>
<br style="clear:both">
</div>
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="false">
<em class="icon-fixed-width fa fa-plus"></em>
</a>
<a href=""><i class="fa fa-phone service-menu-icon"></i></a>
</div>
<div style="height: 0px;" id="collapseFour" class="accordion-body collapse" aria-expanded="false">
<div class="accordion-inner">
<ul>
<li class="dropdown-header">By Industry</li>
<li><a href="http://www.example.net/call-center-outsourcing/banking-financial-services-insurance-bfsi-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> BFSI</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/energy-utilities-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Energy and Utilities</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/government-agencies-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Government Agencies</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/healthcare-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Medical and Healthcare</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/automotive-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Automotive</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/logistics-transportation-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Logistics, Supply Chain and Transportation</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/manufacturing-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Manufacturing</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/real-estate-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Real Estate</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/retail-ecommerce-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Retail and eCommerce</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/telecom-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Telecom</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/media-entertainment-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Media and Entertainment</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/travel-leisure-hospitality-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Travel, Leisure and Hospitality</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/education-institutions-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Education Institutions</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/chemical-pharmaceutical-industry-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Chemical Pharmaceutical</a></li>
<li class="dropdown-header">By Services</li>
<li><a href="http://www.example.net/call-center-outsourcing/outsource-inbound-outbound-sales-customer-acquisition-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Sales and Customer Acquisition</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/outsource-customer-care-call-center-services.php" style="padding-top:6px;"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Customer Care</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/outsource-debt-collection-recovery-call-center-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Debt Collection</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/outsource-technical-support-helpdesk-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Technical Support / Helpdesk Services</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/outsource-call-center-support-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Call Center Support</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/outsource-multi-channel-call-center-support-services.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Multi-channel Support</a></li>
<li><a href="http://www.example.net/call-center-outsourcing/call-center-technology.php"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> Best-in-class Technology</a></li>
</ul>
</div>
</div>
<br style="clear:both">
</div>
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" href="http://www.example.net/outsource-ecommerce-support-services.php">
<em class="icon-fixed-width fa fa-plus"></em>
</a>
<a href=""><i class="fa fa-gears service-menu-icon"></i></a>
</div>
<div style="height: 0px;" id="collapseFive" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
<br style="clear:both">
</div>
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false">
<em class="icon-fixed-width fa fa-plus"></em>
</a>
<a href=""><i class="fa fa-gears service-menu-icon"></i></a>
</div>
<div style="height: 0px;" id="collapseSix" class="accordion-body collapse" aria-expanded="false">
<div class="accordion-inner">
</div>
</div>
<br style="clear:both">
</div>
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseSeven" aria-expanded="false">
<em class="icon-fixed-width fa fa-plus"></em>
</a>
<a href=""><i class="fa fa-gears service-menu-icon"></i></a>
</div>
<div style="height: 0px;" id="collapseSeven" class="accordion-body collapse" aria-expanded="false">
<div class="accordion-inner">
</div>
</div>
<br style="clear:both">
</div>
<div class="accordion-group col-sm-4">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseEight" aria-expanded="false">
<em class="icon-fixed-width fa fa-plus"></em>
</a>
<a href=""><i class="fa fa-gears service-menu-icon"></i></a>
</div>
<div style="height: 0px;" id="collapseEight" class="accordion-body collapse" aria-expanded="false">
<div class="accordion-inner">
</div>
</div>
<br style="clear:both">
</div>
<br style="clear:both">
</div>
<!-- end accordion -->
<br style="clear:both">
</div>
<br style="clear:both">
</li>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header" style="color: #323232;font-weight:bold;">Perspectives on Services</li>
<li><img width="300" height="200" title=" Download Customer Care case study and read how an Australian based manufacturing company increased sales and customer satisfaction after handling their customer care call center services by Invensis." alt="Invensis, a leading IT Services company, offers customer care call center services to clients globally. Download case study and read how an Australia based manufacturing company increased sales and customer satisfaction."
src="http://www.example.net/assets/img/customer-care-call-center-outsourcing-services-indddvensis-technologies.png"></li>
</ul>
</li>
</ul>
jquery的：
(function($) {
"use strict"
// Accordion Toggle Items
var iconOpen = 'fa fa-minus',
iconClose = 'fa fa-plus';
$(document).on('show.bs.collapse hide.bs.collapse', '.accordion', function(e) {
var $target = $(e.target)
$target.siblings('.accordion-heading')
.find('em').toggleClass(iconOpen + ' ' + iconClose);
if (e.type == 'show')
$target.prev('.accordion-heading').find('.accordion-toggle').addClass('active');
if (e.type == 'hide')
$(this).find('.accordion-toggle').not($target).removeClass('active');
});
})(jQuery);
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？