JQuery点击弹出与收回事件（加号变减号）

Turbo12138

浏览: 45118 次
性别:
来自: 北京

最近访客更多访客>>

Sdky

小高你好

qw232144

宋劲冲

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

很久没有与大家分享了，这是一个很简单的效果，look……

 <ul class="moddle f-cb">
                <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a>
                    <ul class="moddle-1">
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                    </ul></li>
                <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a>
                    <ul class="moddle-1">
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                    </ul></li>
                <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a>
                    <ul class="moddle-1">
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                    </ul>
                </li>
                <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a>
                    <ul class="moddle-1">
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                        <li><a href="#">【搜索提交模板】</a></li>
                    </ul></li>
            </ul>

js代码在这里：

$(document).ready(function(){
    $(".boun>a").click(function(){
        var ulNode = $(this).next("ul");
        if(ulNode.css("display")=="none"){
            ulNode.css("display","block")
            $(".jia",this).html("<span>-</span>");
        }else{
            ulNode.css("display","none")
            $(".jia",this).html("<span>+</span>");
        }
        //ulNode.slideToggle()
    });

});