Javascript 单击向下箭头时如何使整个div可展开?
我试图在单击向下箭头时使整个#主滑块容器可展开。a、 下一个向下的雪佛龙,我只想显示两件事是标题工程和向下箭头。我搜索,但只设法隐藏中间的三个容器,所有的旋转木马箭头和标签仍然显示。我的代码:Javascript 单击向下箭头时如何使整个div可展开?,javascript,jquery,Javascript,Jquery,我试图在单击向下箭头时使整个#主滑块容器可展开。a、 下一个向下的雪佛龙,我只想显示两件事是标题工程和向下箭头。我搜索,但只设法隐藏中间的三个容器,所有的旋转木马箭头和标签仍然显示。我的代码: <section id="main-slider" class="no-margin wow fadeInDown"> <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<section id="main-slider" class="no-margin wow fadeInDown">
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
<div class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="engineering-section">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="down-button bounceInDown animated">
<a class="next-down-chevron" href="#"><i class="fa fa-chevron-down"></i></a>
</div>
<div class="carousel-inner">
<div class="item active">
<div class="card-container">
<div class="col-md-4">
<div class="card-section">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div><!--end supporting text-->
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end card-section-->
</div>
<div class="col-md-4">
<div class="card-section">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end card-section-->
</div>
<div class="col-md-4">
<div class="card-section">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end card-section-->
</div><!--end col-md-4-->
</div><!--end card-container-->
</div>
<div class="item">
<div class="card-container content-one">
<div class="col-md-4">
<div class="card-section">
<div class="mdl-card__media">
<img src="img/1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div><!--end supporting text-->
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end card-section-->
</div>
<div class="col-md-4">
<div class="card-section">
<div class="mdl-card__media">
<img src="img/2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end card-section-->
</div>
<div class="col-md-4">
<div class="card-section">
<div class="mdl-card__media">
<img src="img/3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end card-section-->
</div><!--end col-md-4-->
</div><!--end card-container-->
</div>
</div><!--end engineering-->
</div>
</div>
</section>
工程
V8.8 Aspene发动机套件(2015年5月)
V8.8 Aspene过程手册和过程工具
Aspen许可证部署助手
V8.8 Aspene发动机套件(2015年5月)
V8.8 Aspene过程手册和过程工具
Aspen许可证部署助手
如果你想在div中间留下标题和开头,你唯一的选择就是在div的外面有一个拷贝标题和开头,然后在点击时隐藏这些按钮,并用类似的东西显示主滑块:
$('a.next-down-chevron').click(function(){
$('#engineering-trigger').hide();
$('#main-slider').show();
});
请看这张小提琴:代码不精确,可读性不强。你能再具体一点吗?添加一个JSIDLE或plunker,这样人们就可以处理它并提供帮助。我看到你在一个部分上有id=“main slider”,你的问题是关于扩展一个div。这里是JSIDLE:对,主滑块是用于旋转木马滑块的,但我需要整个部分都可以扩展。你是工程标题,你的向下箭头在你的标题中“主滑块”。您不能折叠“主滑块”分区,同时仍显示“工程”标题和向下箭头。您必须将其从折叠的分区中拉出。如果您希望它位于旋转木马和其下方内容之间,则这些分区必须包装在可折叠和展开的单独分区中。