Question

页面加载时，我的Accordion默认情况下会在第一个面板打开的情况下加载。需要一个解决方案，让整个手风琴在页面加载时关闭。任何帮助或帮助将不胜感激。谢谢你的时间。

#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>

Answer 1

只需删除此行：

$('#accordion h2:first').addClass('active').next().slideDown('slow');

此行手动显示第一个内容部分。

演示：http://jsfiddle.net/CzE3q/995/

除了$('#accordion .content').hide();之外，最好使用CSS来隐藏内容：

#acordion .content { display：none; }

最后为了优化目的，缓存$('#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/

Answer 2

检查fiddle

这是你想要的吗？

   $(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（）;

Answer 3

小提琴中的以下行导致它开始打开：

$(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/

JQuery Accordion在加载时打开面板

3 个答案:

演示：http://jsfiddle.net/CzE3q/995/

演示：http://jsfiddle.net/CzE3q/999/