JQuery点击弹出与收回事件（加号变减号）-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3821/article/details/82653979

本文分享了一个简单的网页效果实现，通过使用JavaScript控制DOM元素显示隐藏来实现菜单展开与收起的功能。文中提供了完整的HTML结构及JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

});