javascript - JQuery Accordion 麻烦添加内容和对齐

Question

大家好。我从 SO 的几个不同的人那里得到了一些帮助，所以，自从我开始这个过程以来，我对我的代码所做的所有更改并不完全肯定。无论如何，在我的每个 Accordion 面板中，我试图放置 4 个图像( Logo )以及每个 Logo 上方和下方的一些文本链接。我是 JQuery 的新手，所以我不确定这是不是大小问题或者什么，但是当我尝试将内容(图像)添加到任何面板时，一切都会变得扭曲。在我的 FIDDLE 上很难说清楚，但是 Accordion 的实际宽度是 790px，看起来实际的“面板 1”打开时宽度只有一半左右。如您所见，我现在有两张图片，但是，如果我尝试添加第三张，图片将开始堆叠，所有面板加载都会打开。同样，我对此并不陌生，所以我确信我遗漏了一些相当简单的东西，但是，我尝试添加到任何内容面板的任何新图像或文本都会导致整个 Accordion 以一种方式或另一个，取决于我要添加内容的面板。正如我所说，我不确定它是对齐问题还是面板尺寸或其他问题。到目前为止，这里的人们非常亲切地帮助了我，我感谢所有的帮助。我想这就是你学习的方式。感谢您的宝贵时间。

我的 fiddle :http://jsfiddle.net/CzE3q/1004/

CSS:
#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:#080808;
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:230px;
width:25%;
float:left;

}
#accordion h2.active {
background-color:#ff6600;

}

.content-wrapper{
display: inline-block;
}

.content-wrapper a{
display: block;
}

HTML:
<div id="accordion">
 <h2><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   League Scores</h2>

<div class="content">
    <div class="content1"><a href="http://www.pahockey.com">Pittsburgh Amateur<br> Hockey League</a><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">Squirt</a><br><a href="">Pee Wee</a></div>
<div class="content1"><a href="http://www.pahockey.com">High Performance<br> Hockey League</a><br><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><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   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><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   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><a href="" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHNeoLogo10_zps4b3f5604.png" width="25" height="25" border="0" alt=" photo RTHNeoLogo10_zps4b3f5604.png"/></a>   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 href="http://www.pahockey.com">Blizzard Challenge</a>

JS
$(function () {
$('#accordion .content').hide();
//$('#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');
    }
});

});

Answer 1

这似乎是您的 CSS 有问题。应用于#accordion .content1 的 25% 流体宽度与#accordion .content1 img 的静态宽度不一致。