Question

我有这个HTML结构，我需要点击“.open_panel”，名为“.utenti_iscritti”的div变为可见并向下滑动。显然我不能使用唯一ID，因为这是一个在页面中复制很多次的结构（这是一个列表o课程）。

非常感谢你！

这是我的代码：

    <script type="text/javascript">
        $(".open_panel").click(function() {
                $(this).parent().parent().next("div.utenti_iscritti").slideToggle(300).siblings("div.utenti_iscritti").slideUp("slow");
                //$(this).siblings().css({backgroundImage:"url(left.png)"});
        });
</script>

<div class="lezione">
        <div class="intro">
        <h5>09:00 - 10:00</h5>
        <h4>Walking</h4>
        <h6>Sala Walking con Francesco</h6>
        <div class="action libero">
        <span class="contatore">2</span>
        <h6><a class="open_panel" href="#" title="Ci sono ancora posti liberi">Iscritti</a></h6>
                </div><!--action-->
        </div><!--intro-->

        <div class="utenti_iscritti">
        </div><!--utenti_iscirtti-->

</div><!--lezione-->

Answer 1

查看jquery的closest() - 函数：

$(".open_panel").click(function() {
$(this).closest("div.utenti_iscritti").slideToggle(300).siblings("div.utenti_iscritti").slideUp("slow");
});

Answer 2

我会使用accordian in jQuery UI

这里也有一个演示页面：http://jqueryui.com/demos/accordion/

Answer 3

quick google显示出大量的手风琴控制。我建议使用我使用的jQuery UI accordion。有大量的演示和示例代码，并且使用在线皮肤生成器很好并且很容易使用。

如何使用jQuery轻松制作手风琴？

3 个答案: