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

在多个相同属性和元素实现展开和收起效果是，应该该是用元素或者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属性或元素本身。 

 

转载于:https://www.cnblogs.com/wggWeb/archive/2012/05/26/2518787.html