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

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

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

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

});