隐藏在框底部的Bootstrap折叠列表
当我点击最后列出的类别时，它会打开框的底部并隐藏。我希望它在点击时自动向上滚动。
这是我的代码：
当我点击最后列出的类别时，它会打开框的底部并隐藏。我希望它在点击时自动向上滚动。
.browse-category-seeker {
float: right;
width: 100%;
padding: 0;
}
.panel-body a {
display: inline-block;
width: 100%;
padding: 2px 0;
color: #878689;
cursor: pointer;
}
.right-bottom-db .panel-body {
padding: 0px 15px;
padding-left: 40px;
max-height: 120px;
overflow: auto;
margin-right: 10px;
}
.right-bottom-db .panel-title a {
color: #818181 !important;
text-decoration: none !important;
background: rgba(226, 226, 227, 0.3);
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.right-bottom-db .panel-default > .panel-heading {
background: none;
border: none;
}
.right-bottom-db .panel.panel-default {
border: none;
}
h4.browse-title-c {
border-bottom: none;
font-size: 14px;
background: #f6f6f6;
border-bottom: 2px solid #fff;
}
.right-bottom-db.services-list-main {
border: none;
box-shadow: 0px 1px 21px -9px #504e4e;
}
.right-bottom-db.services-list-main {
margin-top: 20px;
max-height: 350px;
overflow: auto !important;
max-width: 300px;
}
.services-list-main {
width: 100%;
border: 2px solid #d5cbf8;
margin-top: -2px;
border-radius: 10px;
padding-bottom: 10px;
}
.right-bottom-db .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a {
color: inherit;
padding: 10px 15px;
display: inline-block;
width: 100%;
font-size: 14px;
}
h4.browse-title-c {
padding: 10px 15px;
color: #818181 !important;
border-bottom: 2px solid #e2e2e3;
font-size: 14px;
margin: 0;
position: sticky;
position: -webkit-sticky;
top: 0;
background: #fff;
z-index: 1;
}<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="browse-category-seeker">
<div class="right-bottom-db services-list-main">
<h4 class="browse-title-c">Browse by category</h4>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1" class="collapsed">
Art </a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Art Lessons">Art Lessons</a>
<a id="Artwork">Artwork</a>
<a id="Fashion">Fashion</a>
<a id="Graphic Design">Graphic Design</a>
<a id="Interior Design">Interior Design</a>
<a id="Landscape Painting">Landscape Painting</a>
<a id="Logo Design">Logo Design</a>
<a id="Marketing Materials Design">Marketing Materials Design</a>
<a id="Painting">Painting</a>
<a id="Portrait Painting">Portrait Painting</a>
<a id="Tattoo">Tattoo</a>
<a id="Tattoo Removal">Tattoo Removal</a>
<a id="Home Inspection">Home Inspection</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2" class="collapsed">
Automotive </a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Auto Detailing">Auto Detailing</a>
<a id="Auto Painting">Auto Painting</a>
<a id="Body Work">Body Work</a>
<a id="Car Wash">Car Wash</a>
<a id="Chauffeur Services">Chauffeur Services</a>
<a id="Dent Repair">Dent Repair</a>
<a id="Driving Lessons">Driving Lessons</a>
<a id="Mechanic">Mechanic</a>
<a id="Oil Change">Oil Change</a>
<a id="Plug-in Vehicle Charger">Plug-in Vehicle Charger</a>
<a id="Rentals">Rentals</a>
<a id="Sales">Sales</a>
<a id="Smog Check">Smog Check</a>
<a id="Tire Repair">Tire Repair</a>
<a id="Towing">Towing</a>
<a id="Transportation">Transportation</a>
</div>
</div>
</div>
<div class="panel panel-default open">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3" class="collapsed">
Beauty </a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Eyebrows/Lashes">Eyebrows/Lashes</a>
<a id="Facial Treatment">Facial Treatment</a>
<a id="Fashion">Fashion</a>
<a id="Foot Care">Foot Care</a>
<a id="Hair">Hair</a>
<a id="Jewelry">Jewelry</a>
<a id="Makeup">Makeup</a>
<a id="Manicure">Manicure</a>
<a id="Massage">Massage</a>
<a id="Modeling">Modeling</a>
<a id="Nails">Nails</a>
<a id="Pedicure">Pedicure</a>
<a id="Skin Care">Skin Care</a>
<a id="Spa">Spa</a>
<a id="Tanning">Tanning</a>
<a id="Tattoos">Tattoos</a>
<a id="Waxing & Hair Removal">Waxing & Hair Removal</a>
</div>
</div>
</div>
<div class="panel panel-default open">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4" class="collapsed">
Delivery </a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Bulk Delivery">Bulk Delivery</a>
<a id="Courier">Courier</a>
<a id="Food Delivery">Food Delivery</a>
<a id="Luggage Delivery">Luggage Delivery</a>
<a id="Shopping">Shopping</a>
</div>
</div>
</div>
<div class="panel panel-default open">
<div class="panel-heading" role="tab" id="heading5">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5" class="collapsed">
Education </a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Academic Counseling">Academic Counseling</a>
<a id="Academic Preparation">Academic Preparation</a>
<a id="After-school Care">After-school Care</a>
<a id="Assistive Teaching">Assistive Teaching</a>
<a id="Child Care">Child Care</a>
<a id="Coding Workshop">Coding Workshop</a>
<a id="Communications Seminars">Communications Seminars</a>
<a id="Cooking Lessons">Cooking Lessons</a>
<a id="Design Class">Design Class</a>
<a id="Digital Education">Digital Education</a>
<a id="Early Childhood">Early Childhood</a>
<a id="Financial Management">Financial Management</a>
<a id="Group Study">Group Study</a>
<a id="Health Education/Workshops">Health Education/Workshops</a>
<a id="Home Schooling">Home Schooling</a>
<a id="Language Lessons">Language Lessons</a>
<a id="Meeting Room Space">Meeting Room Space</a>
<a id="Music Lessons">Music Lessons</a>
<a id="Post Graduate Advisement">Post Graduate Advisement</a>
<a id="Safety Education">Safety Education</a>
<a id="SAT/MCAT Lessons">SAT/MCAT Lessons</a>
<a id="Scholarship/Financial Aid Advisement">Scholarship/Financial Aid Advisement</a>
<a id="Student Aid">Student Aid</a>
<a id="Student Transportation">Student Transportation</a>
<a id="Teaching Certification">Teaching Certification</a>
<a id="Technology Education">Technology Education</a>
<a id="Tutoring">Tutoring</a>
<a id="Writing Workshops">Writing Workshops</a>
</div>
</div>
</div>
<div class="panel panel-default open">
<div class="panel-heading" role="tab" id="heading6">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6" class="collapsed">
Electronics </a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Computer Sales">Computer Sales</a>
<a id="Computer Training">Computer Training</a>
<a id="Electronic Assembly">Electronic Assembly</a>
<a id="Gadget Repair & Services">Gadget Repair & Services</a>
<a id="Home Stereo/Videos">Home Stereo/Videos</a>
<a id="Software Training">Software Training</a>
<a id="Virus/Malware Removal">Virus/Malware Removal</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading7">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7" class="collapsed">
Events </a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Bartender">Bartender</a>
<a id="Cake Decoration">Cake Decoration</a>
<a id="Catering">Catering</a>
<a id="Chefs">Chefs</a>
<a id="Dancers">Dancers</a>
<a id="DJ’s">DJ’s</a>
<a id="Entertainment">Entertainment</a>
<a id="Event Decoration">Event Decoration</a>
<a id="Event Photography">Event Photography</a>
<a id="Event Planner">Event Planner</a>
<a id="Event Transportation">Event Transportation</a>
<a id="Face Paint">Face Paint</a>
<a id="Fashion">Fashion</a>
<a id="Florist">Florist</a>
<a id="Live Music">Live Music</a>
<a id="Locations">Locations</a>
<a id="Makeup">Makeup</a>
<a id="Party Bus">Party Bus</a>
<a id="Photo Booth">Photo Booth</a>
<a id="Tables and Chairs">Tables and Chairs</a>
<a id="Wedding Officiant">Wedding Officiant</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading8">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse8" aria-expanded="false" aria-controls="collapse8" class="collapsed">
Family </a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading8" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<a id="Assistant Services">Assistant Services</a>
<a id="Babysitter">Babysitter</a>
<a id="Child Care">Child Care</a>
<a id="Counseling">Counseling</a>
<a id="Family Care">Family Care</a>
<a id="Family Cook">Family Cook</a>
<a id="Family Doctor">Family Doctor</a>
<a id="Family Portraits">Family Portraits</a>
<a id="Geriatric Services">Geriatric Services</a>
<a id="Home Care">Home Care</a>
<a id="Home Security">Home Security</a>
<a id="House Sitting">House Sitting</a>
<a id="Law Attorney">Law Attorney</a>
<a id="Pet Sitter">Pet Sitter</a>
<a id="Small Pet Care">Small Pet Care</a>
</div>
</div>
</div>
</div>
</div>
</div>
当我们点击最后列出的类别时，它会打开框的底部并隐藏。我希望它在点击时自动向上滚动。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？