javascript - JQuery Accordion 面板大小调整

Question

我在 SO 上的 Accordion 方面得到了相当多的帮助。因此，我认为一些代码已被不同的成员更改了一些。我现在的大问题是面板 1 和 2 与面板 3 和 4 之间面板大小的差异。我是 CSS 和 JQuery 的新手，所以还不太了解到底出了什么问题。对于面板 1 和 2，面板不跨越标题的宽度。我得到的是面板 3 和 4 的宽度，但不是高度。我在所有 4 个面板中寻找相同的一致性，我只是不确定需要更改什么才能实现这一点。感谢您抽出宝贵时间以及您可能提供的任何帮助。

这是工作示例:http://www.realtimehockey.net/scoresschedules/4579961481

fiddle :http://jsfiddle.net/Del087/3ewjtubd/

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>
        <br><a href="">Bantam</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>
        <br><a href="http://www.pahockey.com">Squirt</a>

        <br><a href="">Pee Wee</a>
        <br><a href="">Bantam</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">
    <div class="content1">Pittsburgh Amateur Hockey League <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">Squirt</a>
        <br>Pee Wee</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>   Tournament Scores</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>

    <br><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<br>Presidents Day Tournament</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<br>Presidents Day Tournament</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<br>Presidents Day Tournament</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>   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<br>Texas Longhorn Shootout</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<br>Presidents Day Tournament</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<br>Presidents Day Tournament</a>

    </div>
</div>

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

关于高度，目前是这样的:

1. 面板 1 的内容被包装在类 .content1 的 div 中，此类的高度设置为 230px，顶部和底部的内边距为 10px
2. 面板 2 的内容被包装在 ID 为 #content1 的 div 中，该 ID 的高度也设置为 230px，顶部和底部的内边距也设置为 10px
3. 面板 3 和 4 的每个内容都包装在类 .content-wrapper 中，没有任何固定高度或填充集，因此内容刚好适合面板。

如果你例如我更愿意将所有面板设置为具有相同填充的相同高度 230px，我刚刚在最新的 Fiddle 中对此进行了调整