多个相同元素的展开和收起

在多个相同属性和元素实现展开和收起效果是，应该该是用元素或者class属性绑定事件，使用prev()和next()方法调用相应的方法。

如html代码：

<dl class="Ecom_list Eposition_rel Elinedash_bot_grey Emar10">

                <dt>

                    <img src="/Content/Images/photo/012.jpg" alt="" width="50" height="50" class="Eborder_grey" />

                </dt>

                <dd >

                    <span class="Efont_blue"></span>

                    曾湘平

                    <font class="Efont_grey Emar_left">2012/5/22 0:00:00</font>

                </dd>

                 <dd  id="Expansion" class="Ehidden_2">

                    阿斯顿发斯蒂芬法国恢复到更好fgsdfgsdfgsdfgdsfgdsfg大法师打发阿斯蒂芬 阿斯顿发大水飞大厦发大水飞大厦

                </dd>

                <dd class="Efont_blue Emar_top Ealign_r">

                    <a href="#" class="show"> 展开</a><span id="Direction" class="Ejiantou_blue_down"></span>

                </dd>

            </dl>

            <dl class="Ecom_list Eposition_rel Elinedash_bot_grey Emar10">

                <dt>

                    <img src="/Content/Images/photo/012.jpg" alt="" width="50" height="50" class="Eborder_grey" />

                </dt>

                <dd >

                    <span class="Efont_blue"></span>

                    曾湘平

                    <font class="Efont_grey Emar_left">2012/5/22 0:00:00</font>

                </dd>

                 <dd  id="Expansion" class="Ehidden_2">

                    阿斯顿发斯蒂芬法国恢复到更好fgsdfgsdfgsdfgdsfgdsfg大法师打发阿斯蒂芬 阿斯顿发大水飞大厦发大水飞大厦

                </dd>

                <dd class="Efont_blue Emar_top Ealign_r">

                    <a href="#" class="show"> 展开</a><span id="Direction" class="Ejiantou_blue_down"></span>

                </dd>

            </dl>

            <dl class="Ecom_list Eposition_rel Elinedash_bot_grey Emar10">

                <dt>

                    <img src="/Content/Images/photo/012.jpg" alt="" width="50" height="50" class="Eborder_grey" />

                </dt>

                <dd >

                    <span class="Efont_blue"></span>

                    曾湘平

                    <font class="Efont_grey Emar_left">2012/5/22 0:00:00</font>

                </dd>

                 <dd  id="Expansion" class="Ehidden_2">

                    阿斯顿发斯蒂芬法国恢复到更好fgsdfgsdfgsdfgdsfgdsfg大法师打发阿斯蒂芬 阿斯顿发大水飞大厦发大水飞大厦

                </dd>

                <dd class="Efont_blue Emar_top Ealign_r">

                    <a href="#" class="show"> 展开</a><span id="Direction" class="Ejiantou_blue_down"></span>

                </dd>

            </dl>

            <dl class="Ecom_list Eposition_rel Elinedash_bot_grey Emar10">

                <dt>

                    <img src="/Content/Images/photo/012.jpg" alt="" width="50" height="50" class="Eborder_grey" />

                </dt>

                <dd >

                    <span class="Efont_blue"></span>

                    曾湘平

                    <font class="Efont_grey Emar_left">2012/5/22 0:00:00</font>

                </dd>

                 <dd  id="Expansion" class="Ehidden_2">

                    阿斯顿发斯蒂芬法国恢复到更好fgsdfgsdfgsdfgdsfgdsfg大法师打发阿斯蒂芬 阿斯顿发大水飞大厦发大水飞大厦

                </dd>

                <dd class="Efont_blue Emar_top Ealign_r">

                    <a href="#" class="show"> 展开</a><span id="Direction" class="Ejiantou_blue_down"></span>

                </dd>
<dl>

 相应的Jquery代码如下：

<script type="text/javascript">

    $(function () {

        $(".show").bind("click", function () {

            if ($(this).next("#Direction").is(".Ejiantou_blue_down")) {

                $(this).next("#Direction").removeClass("Ejiantou_blue_down").addClass("Ejiantou_blue_up");

                $(this).html("收起");

                $(this).parent().prev("#Expansion").removeClass("Ehidden_2");

            } else {

                $(this).next("#Direction").removeClass("Ejiantou_blue_up").addClass("Ejiantou_blue_down");

                $(this).html("展开");

                $(this).parent().prev("#Expansion").addClass("Ehidden_2");

            }

        });

    });  

</script>

注：不能用元素的ID去绑定，用它的class属性或元素本身。