当我点击ul时，我在扩展caret项目时遇到问题，我不知道为什么它不能像w3schools的官方指南那样工作！
这是我的代码：
<div class="row" style="width: 85%;margin-left: 100px;border: beige solid;">
<div class="row-same-height row-full-height">
<div class="col-md-3 col-md-height col-sm-height col-full-height col-transparent col-top"
data-desktop-cell="3" data-mobile-cell="7">
<section class="module-subnavigation component clearfix">
<nav>
<div class="col-md-12 bg-white subnavigation-accordianblock">
<h3 class="alt-secondary-head tertiary-trapezoid-bg image-title">
<span>About</span>
</h3>
<li class="subnavigation-list-group-item first-list">
About
<a data-toggle="collapse" href="#collapse1">
<span class="caret"
style="margin-left: 60px; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #000000;"></span>
</a>
<span class="pull-right icon-chevron-up" id="main-sub"
tabindex="0"></span>
</li>
<div id="collapse1" class="panel-collapse collapse">
<ul class="subnavigation-list-group first-menu dropdown-menu">
<li class="subnavigation-list-group-item">
Services
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Affiliates
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Mission
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Vision
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Values
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Strategy
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
People
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Clients
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Proficeincy Competencies
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Recognition
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Awards
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Corporate
Responsibility
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Thought Leaders
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Commitments
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
</div>
<div class="col-md-6 col-md-height col-sm-height col-full-height col-transparent col-top">
<div class="row">
<div class="col-md-12" data-desktop-cell="4" data-mobile-cell="3">
<div class="parsys-row clearfix">
<section class="module-bodytext bg-white clearfix">
<div class="bodytext-data">
<br/>
<Br/>
<br/>
<p>KINS is one leading group of companies in UAE since 2010,member
companies play in important role in SMEs.with more than 50
people working to help a range of business opportunities and
challenges,improve their performance and increase value.
</p>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-height col-sm-height col-full-height col-nested col-top">
<div class="row tmpl-row">
<div class="col-md-12" data-desktop-cell="7" data-mobile-cell="6">
<section class="module-connectandrfp component clearfix">
<h4 class="primary-head" style="font-size: 32px;">
Connect with us
</h4>
<ul class="list-group">
<li class="list-group-item">
<span class="fa fa-map-marker pull-left"></span>
<a class="connectandrfp-connect-custom-padding"
href="http://www.makani.ae/desktop/index.html?"
title="Find office locations">
Makani No.3856698404
</a>
</li>
<li class="list-group-item" tabindex="0">
<span class="icon-email pull-left"></span>
<span id="contact-form-modal"
class="fa fa-envelope connectandrfp-connect-custom-padding"
data-modal-url="/etc/partials/kpmgpublic/contact-form/contact-form.html"
data-toggle="modal" data-target="#kpmgModal"
data-remote="/xx/en/home/misc/contact-form.html"
title="Email us">
<span style="color:#00338D;font-size: 15px;">info@kinsuae.com
</span>
</span>
</li>
<li class="list-group-item">
<span class="icon-users pull-left"></span>
<span class="fa fa-phone connectandrfp-connect-custom-padding"
aria-hidden="true"
style="font-size: 20px;">
<span style=" ">+971 (4) 25 75 928</span>
</span>
</li>
</ul>
<div class="connectandrfp-rfp">
<div class="rfp-space"><![CDATA[ ]]></div>
<div class="rfp-container">
<h4 class="tertiary-head">
<a href="/page/request_proposal">Request for proposal</a>
</h4>
<div class="rfp-cta-space"><![CDATA[ ]]></div>
<p class="pull-right">
<img class="rfp-loading hide"
src="/etc/designs/kpmgpublic/images/loading.gif" alt=""/>
<span class="btn-cta rfp-modal" tabindex="0">
<span class="icon-chevron-right"></span>
</span>
</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
虽然我有很多这样的<section class="module-bodytext bg-white clearfix">我希望当我从li中选择ul时，它应该向我显示一个部分..我应该使用JQuery吗？它可以通过HTML和CSS以及Bootstrap来处理吗？
答案 0 :(得分：0)
请参阅代码段。我认为它正在运作
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row" style="width: 85%;margin-left: 100px;border: beige solid;">
<div class="row-same-height row-full-height">
<div class="col-md-3 col-md-height col-sm-height col-full-height col-transparent col-top"
data-desktop-cell="3" data-mobile-cell="7">
<section class="module-subnavigation component clearfix">
<nav>
<div class="col-md-12 bg-white subnavigation-accordianblock">
<h3 class="alt-secondary-head tertiary-trapezoid-bg image-title">
<span>About</span>
</h3>
<li class="subnavigation-list-group-item first-list">
About
<a data-toggle="collapse in" href="#collapse1">
<span class="caret"
style="margin-left: 60px; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #000000;"></span>
</a>
<span class="pull-right icon-chevron-up" id="main-sub"
tabindex="0"></span>
</li>
<div id="collapse1" class="panel-collapse">
<ul class="subnavigation-list-group first-menu dropdown-menu">
<li class="subnavigation-list-group-item">
Services
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Affiliates
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Mission
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Vision
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Values
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Strategy
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
People
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Clients
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Proficeincy Competencies
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Recognition
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Awards
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Corporate
Responsibility
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Thought Leaders
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Commitments
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
</div>
<div class="col-md-6 col-md-height col-sm-height col-full-height col-transparent col-top">
<div class="row">
<div class="col-md-12" data-desktop-cell="4" data-mobile-cell="3">
<div class="parsys-row clearfix">
<section class="module-bodytext bg-white clearfix">
<div class="bodytext-data">
<br/>
<Br/>
<br/>
<p>KINS is one leading group of companies in UAE since 2010,member
companies play in important role in SMEs.with more than 50
people working to help a range of business opportunities and
challenges,improve their performance and increase value.
</p>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-height col-sm-height col-full-height col-nested col-top">
<div class="row tmpl-row">
<div class="col-md-12" data-desktop-cell="7" data-mobile-cell="6">
<section class="module-connectandrfp component clearfix">
<h4 class="primary-head" style="font-size: 32px;">
Connect with us
</h4>
<ul class="list-group">
<li class="list-group-item">
<span class="fa fa-map-marker pull-left"></span>
<a class="connectandrfp-connect-custom-padding"
href="http://www.makani.ae/desktop/index.html?"
title="Find office locations">
Makani No.3856698404
</a>
</li>
<li class="list-group-item" tabindex="0">
<span class="icon-email pull-left"></span>
<span id="contact-form-modal"
class="fa fa-envelope connectandrfp-connect-custom-padding"
data-modal-url="/etc/partials/kpmgpublic/contact-form/contact-form.html"
data-toggle="modal" data-target="#kpmgModal"
data-remote="/xx/en/home/misc/contact-form.html"
title="Email us">
<span style="color:#00338D;font-size: 15px;">info@kinsuae.com
</span>
</span>
</li>
<li class="list-group-item">
<span class="icon-users pull-left"></span>
<span class="fa fa-phone connectandrfp-connect-custom-padding"
aria-hidden="true"
style="font-size: 20px;">
<span style=" ">+971 (4) 25 75 928</span>
</span>
</li>
</ul>
<div class="connectandrfp-rfp">
<div class="rfp-space"><![CDATA[ ]]></div>
<div class="rfp-container">
<h4 class="tertiary-head">
<a href="/page/request_proposal">Request for proposal</a>
</h4>
<div class="rfp-cta-space"><![CDATA[ ]]></div>
<p class="pull-right">
<img class="rfp-loading hide"
src="/etc/designs/kpmgpublic/images/loading.gif" alt=""/>
<span class="btn-cta rfp-modal" tabindex="0">
<span class="icon-chevron-right"></span>
</span>
</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
现在解决了:)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row" style="width: 85%;margin-left: 100px;border: beige solid;">
<div class="row-same-height row-full-height">
<div class="col-md-3 col-md-height col-sm-height col-full-height col-transparent col-top"
data-desktop-cell="3" data-mobile-cell="7">
<section class="module-subnavigation component clearfix">
<nav>
<div class="col-md-12 bg-white subnavigation-accordianblock">
<h3 class="alt-secondary-head tertiary-trapezoid-bg image-title">
<span>About</span>
</h3>
<li class="subnavigation-list-group-item first-list">
About
<a data-toggle="collapse in" href="#collapse1">
<span class="caret"
style="margin-left: 60px; border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid #000000;"></span>
</a>
<span class="pull-right icon-chevron-up" id="main-sub"
tabindex="0"></span>
</li>
<div id="collapse1" class="panel-collapse">
<ul class="subnavigation-list-group first-menu">
<li class="subnavigation-list-group-item">
Services
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Affiliates
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Mission
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Vision
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Values
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Strategy
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
People
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Clients
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Proficeincy Competencies
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Recognition
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Awards
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Corporate
Responsibility
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Thought Leaders
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
<li class="subnavigation-list-group-item">
Commitments
<div class="subnavigation-accordiancontainer">
<ul class="subnavigation-list-group subnavigation-level">
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
</div>
<div class="col-md-6 col-md-height col-sm-height col-full-height col-transparent col-top">
<div class="row">
<div class="col-md-12" data-desktop-cell="4" data-mobile-cell="3">
<div class="parsys-row clearfix">
<section class="module-bodytext bg-white clearfix">
<div class="bodytext-data">
<br/>
<Br/>
<br/>
<p>KINS is one leading group of companies in UAE since 2010,member
companies play in important role in SMEs.with more than 50
people working to help a range of business opportunities and
challenges,improve their performance and increase value.
</p>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-height col-sm-height col-full-height col-nested col-top">
<div class="row tmpl-row">
<div class="col-md-12" data-desktop-cell="7" data-mobile-cell="6">
<section class="module-connectandrfp component clearfix">
<h4 class="primary-head" style="font-size: 32px;">
Connect with us
</h4>
<ul class="list-group">
<li class="list-group-item">
<span class="fa fa-map-marker pull-left"></span>
<a class="connectandrfp-connect-custom-padding"
href="http://www.makani.ae/desktop/index.html?"
title="Find office locations">
Makani No.3856698404
</a>
</li>
<li class="list-group-item" tabindex="0">
<span class="icon-email pull-left"></span>
<span id="contact-form-modal"
class="fa fa-envelope connectandrfp-connect-custom-padding"
data-modal-url="/etc/partials/kpmgpublic/contact-form/contact-form.html"
data-toggle="modal" data-target="#kpmgModal"
data-remote="/xx/en/home/misc/contact-form.html"
title="Email us">
<span style="color:#00338D;font-size: 15px;">info@kinsuae.com
</span>
</span>
</li>
<li class="list-group-item">
<span class="icon-users pull-left"></span>
<span class="fa fa-phone connectandrfp-connect-custom-padding"
aria-hidden="true"
style="font-size: 20px;">
<span style=" ">+971 (4) 25 75 928</span>
</span>
</li>
</ul>
<div class="connectandrfp-rfp">
<div class="rfp-space"><![CDATA[ ]]></div>
<div class="rfp-container">
<h4 class="tertiary-head">
<a href="/page/request_proposal">Request for proposal</a>
</h4>
<div class="rfp-cta-space"><![CDATA[ ]]></div>
<p class="pull-right">
<img class="rfp-loading hide"
src="/etc/designs/kpmgpublic/images/loading.gif" alt=""/>
<span class="btn-cta rfp-modal" tabindex="0">
<span class="icon-chevron-right"></span>
</span>
</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>