Flexslider标题水平折叠
我已经对这个问题进行了几个小时的实验，但却无法弄明白。我想在flexslider库中的每张幻灯片上为flexslider标题添加一个水平折叠函数。
我需要标题开始折叠，并提供一个小信息＆＃34;我＆＃34;幻灯片图像右上角的按钮（参见示例图1）。
当＆＃34; i＆＃34;单击按钮，标题将动画从右侧滑出以覆盖图像宽度的1/3，并显示该图像的文本。信息＆＃34;我＆＃34;将由＆＃34; X＆＃34;图标会在点击时折叠标题（参见示例图2），然后转回＆＃34; i＆＃34;一旦标题回到崩溃状态。请参阅下面的网站链接，HTML和CSS。任何帮助或建议表示赞赏！
网站示例： http://parkerrichard.com/studiogreen/html/project-01.html
示例1（标题已折叠）：
示例2（标题打开）：
HTML
<title>Studio Green</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap custom CSS -->
<link href="css/custom-small-gallery.css" rel="stylesheet">
<!-- Typekit custom fonts -->
<script src="//use.typekit.net/bcn3ife.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<link href="css/flexslider.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>
<!-- custom icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/flexslider-icon.eot">
</head>
<body>
<!-- row 1: static navbar -->
<nav class="navbar navbar-default navbar-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a>
</div><!-- navbar toggle -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="process.html">PROCESS</a></li>
<li><a href="office.html">OFFICE</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div><!--/nav-collapse -->
</div><!-- container -->
</nav><!-- navbar -->
<!-- row 2: body -->
<div class="container">
<div class="row centered">
<!-- sidebar -->
<aside class="navbar-collapse collapse panel-group col-lg-3 col-med-4 col-sm-4" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<li class="active">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
RESIDENTIAL
</li>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
<li class="active"><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">2</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">3</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">4</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">5</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">6</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">7</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">8</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">9</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">10</span></a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="schools.html">
SCHOOLS
</a>
</h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="parks.html">
PARKS
</a>
</h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="hospitality.html">
HOSPITALITY
</a>
</h4>
</div>
</div> <div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
ELEMENTS
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<ul>
<li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
<li><a href="plants.html">ENTRY</a></li>
<li><a href="plants.html">FENCES</a></li>
<li><a href="plants.html">FIRE</a></li>
<li><a href="plants.html">LIGHTING</span></a></li>
<li><a href="plants.html">PAVING</a></li>
<li class="active"><a href="plants.html">PLANTS</a></li>
<li><a href="plants.html">POOLS</a></li>
<li><a href="plants.html">SEATING</a></li>
<li><a href="plants.html">SCULPTURE</a></li>
<li><a href="plants.html">STAIRS</a></li>
<li><a href="plants.html">SUSTAINABILITY</a></li>
<li><a href="plants.html">WATER</a></li>
</ul>
</div>
</div>
</div>
</aside>
<!-- slideshow gallery -->
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 col-xs-12">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/project-1_01.jpg" />
</li>
<li>
<img src="img/project-1_02.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, restraint, minimalization, and restoration landscape.</p>
</li>
<li>
<img src="img/project-1_03.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods.</p>
</li>
<li>
<img src="img/project-1_04.jpg" />
</li>
<li>
<img src="img/project-1_05.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along.</p>
</li>
<li>
<img src="img/project-1_06.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass.</p>
</li>
<li>
<img src="img/project-1_07.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization.</p>
</li>
<li>
<img src="img/project-1_08.jpg" />
</li>
</ul>
</div>
</div>
<!-- address -->
<address>232 SIR FRANCIS DRAKE BLVD</br>
SAN ANSELMO, CA 94960</br>
415 721 0905</address>
</div><!--/row -->
</div><!--/container -->
<!-- javaspcript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade"
});
});
</script>
</body>
</html>
CSS
/* this is a custom css stylesheet */
/* ==========================================================================
Base Styles, Bootstrap Modifications & Fonts Import
========================================================================== */
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.centered {
text-align: center;
}
.container {
width: 100%;
}
.img-centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.mt-lg {
margin-top: 100px;
}
.mt {
margin-top: 80px;
}
.mb {
margin-bottom: 80px;
}
.drop {
margin-bottom: -15px;
}
.spaced {
margin-left: 37px;
}
.sm-spaced {
margin-left: 5px;
}
/* ==========================================================================
General styles
========================================================================== */
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: "proxima-nova", sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 1px;
color: #555;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
a {
color: #555;
outline: 0;
}
.strong {
font-weight: bold;
font-size: 13px;
}
small {
color: #555;
}
aside {
position: absolute;
top: 0px;
left: 0px;
}
address {
text-align: left;
line-height: 23px;
letter-spacing: 2px;
float: right;
padding: 90px 0px 30px 15px;
margin-right: 70px;
}
.email {
color: #6CAA3D;
font-weight: 400;
}
.info-box {
float: right;
text-align: left;
line-height: 17px;
font-weight: 400;
letter-spacing: 2px;
width: 315px;
height: 450px;
padding: 60px 20px 0 15px;
}
.info-box p {
padding-top: 12px;
}
.info-box h5 {
padding-bottom: 8px;
font-size: 17px;
font-weight: 700;
}
.contact {
height: auto!important;
margin-right: 5px;
width: 315px;
}
.team-box img {
border: 1px solid black;
margin-bottom: 30px;
}
/* ==========================================================================
Navigation styles
========================================================================== */
/*
* Top nav section
*/
.navbar-header {
padding-bottom: 50px;
}
.navbar-brand {
margin-left: 0px!important;
}
.navbar .nav {
text-align: right;
margin-top: 45px;
}
.navbar .nav > li {
float: none;
display: inline-block;
font-size: 14px;
letter-spacing: 2px;
font-weight: 600;
}
.navbar-default {
background-color: white;
border-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
color: #555;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active, a:focus {
color: #6CAA3D;
background-color: transparent;
text-decoration: none;
outline: 0;
}
.navbar-default .navbar-nav > li {
padding-left: 15px;
padding-right: 15px;
}
.navbar-collapse {
margin-top: -65px;
border-top: 0px;
}
.navbar-default .navbar-collapse {
padding-top: 10px;
}
.logo {
margin-top: 10px;
height: 100px;
width: 200px;
}
.navbar-right {
padding: 15px 20px 0 0;
}
/*
* Left aside nav
*/
.panel {
border: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0);
box-shadow: 0 0px 0px rgba(0,0,0,.0);
margin: 45px 0 0 100px;
}
.panel-title {
font-size: 14px;
letter-spacing: 2px;
font-weight: 600;
color: #555;
padding-top: 7px;
padding-bottom: 7px;
list-style: none;
}
.panel-title a {
text-decoration: none;
}
.panel-default > .panel-heading {
background-color: transparent;
border-color: transparent;
}
.panel-body {
margin-left: -25px;
margin-top: -22px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.panel-body ul {
list-style-type: none;
}
.panel-body ul li {
padding-top: 10px;
padding-bottom: 10px;
letter-spacing: 1px;
}
.panel-group {
text-align: left;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
border-top:0px;
}
.nav-caret {
padding-left: 10px;
font-size: 8px;
}
/*
* flexslider format
*/
.flexslider{
background:none!important;
border:none!important;
box-shadow:none!important;
margin:0px -15px 0px 0px!important;
overflow: hidden;
}
.flex-direction-nav a {
color: #999!important;
}
.flex-next {
padding-right: 40px!important;
}
.flex-control-nav {
text-align: right!important;
padding-right: 70px!important;
}
.flex-control-paging li a {
color: transparent!important;
}
.nodot .flex-control-paging li a {
display: none!important;
}
.flex-control-paging li a.flex-active {
background: #6CAA3D!important;
}
.right {
padding-top: 100%!important;
bottom: 0;
right: 0;
margin-bottom: 0px;
}
.top {
top: 0;
margin-top: 10px;
}
.btm {
bottom: 0;
margin-bottom: 10px;
}
.l {
left: 0;
}
.r {
right: 0;
}
.w {
width: 100%!important;
left: 10px;
padding-right: 30px!important;
}
.flex-caption {
position: absolute;
text-align: left;
background:rgba(255, 255, 255, 0.7);
z-index: 1;
padding: 20px;
font-size: 11px;
width: 300px;
}
.flex-caption p {
padding-top: 12px;
}
.carousel .slides > li {
padding-right: 10px;
}
1 个答案:
答案 0 :(得分：1)
首先，我必须重新配置幻灯片的html格式，将标题放在自己的div中，ID为＆＃34;切换＆＃34;：
<ul class="slides">
<li>
<img src="img/schools/img-01.jpg" />
<div id="toggle" class="flex-caption right">
<div class="caption-content">
<span class="hcaption">MARIN ACADEMY</span><br />
<br />
Location: <span class="lite"></span><br />
Architect: <span class="lite"></span><br />
<br />
<p>Taectur sinti consed magnimp oreptatem que est essi cuptus doluptate pratis rero omni con fugitatius venienimus.Xim fuga. Iliqui omnim comnimus estiorrum cum et accus et liquia nos.</p>
</div>
</div>
</li>
</ul>
然后我添加了jQuery＆＃34; slide＆＃34;功能：
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
这就是诀窍！这是点击隐藏/显示的工作版本：
http://parkerrichard.com/studiogreen/html/schools-caption-test.html
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？