我有这个jquery代码,可以在点击时滑动切换内容。这段代码有效,我只想知道是否有更简单的方法。我尝试过slice()没有运气。我试图找到一种方法来做到这一点,而无需为我想要切换的每个项目编写代码。
谢谢,
凯文
<script type="text/javascript">
$("div.accord_panel").hide();
$(document).ready(function () {
$("p.accord_header:eq(0)").click(function () {
$("div.accord_panel:eq(0)").slideToggle("slow");
$("div.accord_panel:eq(1)").hide();
$("p.accord_header:eq(1)").show();
});
$("p.accord_header:eq(1)").click(function () {
$("div.accord_panel:eq(1)").slideToggle("slow");
$("p.accord_header:eq(0)").show();
$("div.accord_panel:eq(0)").hide();
});
});
</script>
CSS:
p.accord_header
{
margin: 0;
padding: 0;
font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
color: #615E5A;
font-size: 9pt;
font-weight: bold;
background-color: #f3f0ed
}
div.accord_panel
{
margin: 0;
padding: 0;
font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
color: #615E5A;
font-size: 9pt;
display: none;
background-color: #f3f0ed
}
和HTML:
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br />
<br />
</strong></p>
<strong>
</strong>
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br />
<br />
<br />
Julie Thomas // 425.881.6185</span><br />
</strong>
</div>
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span><br />
<br />
</strong></p>
<strong>
</strong>
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br />
<br />
<br />
Julie Thomas // 425.881.6185</span><br />
答案 0 :(得分:1)
这是你的答案。 Jquery Tools,易于使用且轻巧。
答案 1 :(得分:1)
您可以将一个事件参数传递给click函数,以便能够使用event.target
属性来获取被点击的元素,然后让该元素的下一个.accord_panel
兄弟在之后向下滑动向上滑动所有面板元素:
$("p.accord_header").click(function(e) {
$("div.accord_panel").stop(true, false).slideUp();
$(e.target).closest('p').next('.accord_panel').stop(true, false).slideDown();
});
这适用于任意数量的标题和面板。