jQuery--toggle（乒乓键）

最新推荐文章于 2023-01-08 23:17:14 发布

独恋幽兰

最新推荐文章于 2023-01-08 23:17:14 发布

阅读量1.2k

点赞数

分类专栏： jQuery 文章标签： jquery 乒乓键

本文链接：https://blog.youkuaiyun.com/zzq1992126/article/details/49511211

版权

jQuery 专栏收录该内容

3 篇文章

订阅专栏

toggle切换元素的显示与隐藏状态：
测试代码（jQuery_toggle.html）：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="jquery-1.8.0.min.js"></script>  
 </head>
 <body>
        <ul>
            <li>
                <a href="javascript:void(0);"><span class="text">一级标题</span></a>
                <div class="details">
                    <p>二级标题二级标题二级标题二级标题二级标题二级标题二级 标题二级标题二级标题二级标题二级标题二级标题</p>
                    <p>二级标题二级标题二级标题二级标题二级标题二级标题二级 标题二级标题二级标题二级标题二级标题二级标题</p>
                </div>
            </li>
            <li>
                <a href="javascript:void(0);"><span class="text">一级标题<i class="iconNew"></i></span><span class="arrow"></span></a>
                <div class="details">
                    <p>二级标题二级标题二级标题二级标题二级标题二级标题二级 标题二级标题二级标题二级标题二级标题二级标题</p>
                </div>
            </li>
            <li>
                <a href="javascript:void(0);"><span class="text">一级标题</span><span class="arrow"></span></a>
                <div class="details">
                    <p>二级标题二级标题二级标题二级标题二级标题二级标题二级 标题二级标题二级标题二级标题二级标题二级标题</p>
                    <p>二级标题二级标题二级标题二级标题二级标题二级标题二级 标题二级标题二级标题二级标题二级标题二级标题</p>
                </div>
            </li>
            <li>
                <a href="javascript:void(0);"><span class="text">一级标题</span><span class="arrow"></span></a>
                <div class="details">
                    <p>二级标题二级标题二级标题二级标题二级标题二级标题二级 标题二级标题二级标题二级标题二级标题二级标题</p>
                </div>
            </li>
        </ul>


  <script>
          $(function(){
            //页面执行方法
            $("ul").find("li").each(function(){
            //在页面中所有ul的后代元素中取li，然后遍历这个li集合，遍历方法function
                var details = $(this).find("div");
                //在方法中定义变量details，其值为当前的li元素的后代元素中的div元素
                $(this).find("a").each(function(){
                    //在当前的li标签的后代元素中选择所有的a标签，执行function方法
                    $(this).toggle(
                        //乒乓键
                        function(){
                             //第一次点击，details变量设置为显示
                             $(details).show();
                        },
                        function(){
                             //第二次点击，details变量设置为隐藏
                             $(details).hide();
                        }
                    )
                })

            });
        });
  </script>
 </body>
</html>