JQuery 手风琴在加载时打开面板.
JQuery Accordion open panels on load
在页面加载时,默认情况下,我的手风琴在第一个面板打开的情况下加载. 需要一个解决方案,让整个手风琴在页面加载时关闭。 任何帮助或协助将不胜感激。 谢谢你的时间。
小提琴 http://jsfiddle.net/CzE3q/989/
#accordion {
width:100%;
margin:10px auto;
border:1px solid black;
-webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
}
#accordion h2 {
clear: both;
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
border:1px solid white;
background-color:#ff6600;
font:bold 22px Petua One;
color:#ffffff;
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
#accordion .content1 {
background-color:#ffffff;
padding:10px 15px;
color:black;
height:150px;
width:25%;
float:left;
}
#accordion h2.active {
background-color:#000000;
}
.content-wrapper{
display: inline-block;
}
.content-wrapper a{
display: block;
}
<div id="accordion">
<h2>League Scores</h2>
<div class="content">
<div class="content1"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt=" photo PAHL210210_zps694744b9.png"/></a>
<br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a>
<br><a href="http://www.pahockey.com">Squirt</div>
<div class="content1"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/HPHL_zps31e66fcd.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/HPHL_zps31e66fcd.png" width="90" height="90" border="0" alt=" photo HPHL_zps31e66fcd.png"/></a>
</div>
</div>
<h2>League Standings</h2>
<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt="Pittsburgh Amateur Hockey League - Pittsburgh, PA" title="Pittsburgh Amateur Hockey League - Pittsburgh, PA"/></a>
<br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a></div>
<div class="content"></div>
<h2>Tournament Scores</h2>
<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100" border="0" alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><br><a href="http://www.pahockey.com">Minnesota Gone Wild"</a></div>
<h2>Tournament Standings</h2>
<div class="content">
<div class="content-wrapper">
<a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100" border="0" alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><a href="http://www.pahockey.com">Minnesota Gone Wild</a>
</div>
<div class="content-wrapper">
<a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a>Niagara Sports Tournaments</a>
只需删除此行:
$('#accordion h2:first').addClass('active').next().slideDown('slow');
此行手动使第一个内容部分可见。
演示:http://jsfiddle.net/CzE3q/995/
与其$('#accordion .content').hide();
不如使用 CSS 来最初隐藏内容:
#accordion .content { 显示:无; }
最后,出于优化目的,缓存$('#accordion h2')
选择器是有意义的:
var $h2 = $('#accordion h2').click(function () {
if ($(this).next().is(':hidden')) {
$h2.removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
演示:http://jsfiddle.net/CzE3q/999/
小提琴中的以下行导致它开始打开:
$(function () {
$('#accordion .content').hide();
//Comment out this line:
//$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function () {
if ($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
请参阅更新的小提琴:http://jsfiddle.net/CzE3q/998/
检查小提琴
这是你想要的吗?
$(function () {
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function () {
if ($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
$('#accordion .content').hide();
});
我将兽皮重新定位到最后
$('#accordion .content').hide();
相关文章:
- 如何在页面加载时折叠手风琴样式的特定部分
- Jquery手风琴在页面加载时折叠
- 在页面加载时打开手风琴中的第一项
- 基金会手风琴如果未在 HTML 中声明,则不加载
- JqueryUI(手风琴)效果在替换为新内容后无法加载
- 如何创建在闭合状态下加载的 3 级手风琴
- jQuery 手风琴“heightStyle: fill”,页面加载时显示设置为 none
- 从 $http.get 加载手风琴组使用 AngularJS 打开.
- JQuery 手风琴在加载时打开面板.
- 引导手风琴.保留多个面板的页面加载状态
- j查询手风琴 |打开页面加载和活动状态混淆的第一个元素
- 在 jQuery UI 手风琴中加载 Google 地图
- jquery手风琴菜单默认在加载时关闭
- 如何让我的手风琴在所有菜单关闭的情况下加载.
- jquery手风琴在部分ajax页面重新加载后损坏
- Document Ready等效于通过jQuery Mobile手风琴加载ajax的内容
- Ajax延迟加载,手风琴按钮未激活
- 在Twitter Bootstrap中,我如何阻止所有的手风琴在页面加载时瞬间展开
- 打开手风琴加载与活动类
- AngularJS 手风琴加载数据在打开时