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

 

很久没有与大家分享了，这是一个很简单的效果，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()
    });

});