我在每个页面上都有一个 accordion ,但只希望打开适用于该页面所属类别的切换容器,其余的都关闭。我已经研究了两个小时了,还是想不出来。
这是我写的:
$(document).ready(function () {
$(".toggle-container:not(#commercial:next.toggle_container").hide();
$("#commercial").addClass("active").children().show();
$(".trigger").click(function () {
$(".toggle_container:visible").slideUp('slow');
$(this).toggleClass("active").next().slideToggle("slow");
return false;
});
});
css:
.toggle_container {
display: none;
}
html片段:
<div class="accordian">
<h3 id="rack-structures" class="trigger"><a href="#">Rack Structures</a></h3>
<div class="toggle_container">
<div class="block">
<p><a href="HEB-grocery-rack-structure-steel-contractor.html?panel=4"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />H-E-B Corporation</a></p>
<p> <strong>Location:</strong> San Antonio TX</p>
<p> Midwest Steel has great experience with specialized rack structure projects. This project was for a very large grocery chain serving the state of Texas.</p>
</div>
</div>
<!-- tab entry -->
<div class="accordian">
<h3 id="commercial" class="trigger"><a href="#">Commercial</a></h3>
<div class="toggle_container">
<div class="block">
<p><a href="commercial-high-rise-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Hyatt Corporation World Headquarters<br />
Chicago, IL</a></p>
<p><a href="hotel-casino-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />MGM Grand Hotel Casino<br />
Detroit, MI</a></p>
<p><a href="convention-center-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Cobo Center<br />
Detroit, MI</a></p>
</div>
</div>
</div>
<!-- tab entry -->
<div class="accordian">
<h3 id="airport-aerospace" class="trigger"><a href="#">Airport/Aerospace</a></h3>
<div class="toggle_container">
<div class="block">
<p><a href="airport-terminal-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />NASA Moblie Launcher<br />
Kennedy Space Center, FL</a></p>
<p><a href="airport-terminal-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Detroit Metropolitan Airport North Terminal Expansion<br />
Romulus, MI</a></p>
<p><a href="airport-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" width="930" height="270" alt="industrial steel" />Wichita Mid-Continent Airport <br />
Wichita, KS</a></p>
</div>
</div>
</div>
2条答案
按热度按时间ktecyv1j1#
此行包含错误:
检查了控制台,它就在那里。把它改成:
qq24tv8q2#
你只是在这一行缺少了一个结束括号:
应为:
jsFiddle