JKING_ 2020-02-18 09:33 采纳率: 0%
浏览 574
已采纳

$('.tree li').on('click',function(){ $(this).children('ul').slideToggle(); })第二层点击的时候会执行两次是为什么?

下面是是我的js代码

$('.tree li').on('click',function(){
      $(this).children('ul').slideToggle();
 })

前台代码：

<ul class="tree">
   <li class="tree-current"><a href="javasrript:void(0);" >测试</a>
      <ul>
          <li><a href="javasrript:void(0);" >测试</a>
            <ul>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
             <li><a href="javasrript:void(0);" title="">测试</a></li>
           </ul>
         </li>
         <li><a href="" title="">测试</a></li>
         <li><a href="" title="">测试</a></li>
         <li><a href="" title="">测试</a></li>
          <li><a href="" title="">测试</a></li>
          </ul>
        </li>
      <li><a href="" title="">测试</a></li>
     <li><a href="" title="">测试</a></li>
      <li><a href="" title="">测试</a></li>
   </ul>
  • 写回答

2条回答 默认 最新

  • wooddy1982 2020-02-18 10:16
    关注

    javascript 事件冒泡

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • jquerytree.zip
    2019-08-05 18:34
    $("#tree").on("click", "li:not(:has(ul))", function() { var url = $(this).data("url"); if (url) { window.location.href = url; } }); ``` 在这个示例中，我们给没有子节点的`<li>`元素添加了`data-url`...
  • jquery树.zip
    2021-07-02 15:09
    $(this).children('ul').slideToggle('fast'); }); ``` 2. **动态加载子节点**：如果子节点数据是从服务器获取的，可以使用`.load()`或`.ajax()`方法异步加载： ```javascript $('.tree li').click(function() { ...
  • shuxingcaidan.rar_树形菜单
    2022-09-22 17:29
    $(this).children('ul').slideToggle(); } }); }); ``` 四、现代前端框架实现 在React、Vue、Angular等现代前端框架中，也有专门的组件库提供了树形菜单组件，如React的Ant Design、Vue的Element UI等。这些组件...
  • jquery资源管理器树形菜单.rar
    2019-07-04 00:09
    使用事件委托（如`$(document).on('click', '#treeMenu li.hasChild a', function() {...})`）可以让事件处理更高效。 通过以上步骤，我们可以构建一个功能完善的jQuery资源管理器树形菜单。这个资源包可能包含了...
  • 树形菜单示范.rar
    2009-06-23 12:00
    $('.tree-menu > li').on('click', function(e) { e.stopPropagation(); $(this).children('ul').slideToggle(); }); }); ``` 4. 数据结构与算法 在编程中，通常使用数据结构如链表或数组来表示树形菜单的节点...
  • ry-ui.js解读和定制
    2021-06-01 15:42
    A.L.P.K.的博客 (function ($) { $.extend({ _tree: {}, bttTable: {}, // 表格封装处理 table: { // 初始化表格参数 init: function(options) { var defaults = { id: "bootstrap-table", type: 0, // 0 代表bootstrapTable ...
  • JavaScript编写的树形(tree)学习
    2010-10-02 04:37
    $('.tree i.toggle').on('click', function() { var $this = $(this), $children = $this.parent().find('> ul'); if ($children.is(':visible')) { $children.slideUp(); $this.removeClass('expanded')....
  • 使用jquery建立tree
    2013-01-18 16:36
    $(this).children('ul').slideToggle('fast'); $(this).toggleClass('collapsed'); }); }); ``` 4. **动态加载**：如果数据是从服务器获取的，可以使用jQuery的Ajax方法异步加载子节点。例如，当用户点击父节点...
  • 树形菜单
    2018-04-02 17:36
    夕阳下美了剪影的博客 ul li{ list-style: none; } a{ text-decoration: none; } #warp{ width: 300px;overflow: hidden;border:1px solid #dadada; } .nav-first,.nav-second,.nav-three{ margin-left: 20px; } #warp i{width: ...
  • python自动化（二）前端基础：3.JavaScript基础
    2021-04-28 22:02
    new nm个对象的博客 js中 if选择/for循环/函数function 后面的语句块都是由 {} 包裹的 2.变量和常量 定义变量： var 变量名（全局变量） let 变量名（局部变量） 定义常量： const 常量名 变量名的命名规范： 组成：字母、数字、下划线...
  • jQuery操作2
    2021-08-05 00:42
    还是记不住的博客 实例 输出每个 li 元素的文本： $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); 选择器 选择器 实例 选取 实例 * $("*") 所有元素 选择 内的所有元素 $(body *) #id $("#...
  • jquery查找ul属性不是hide_如何使用jQuery在HTML中切換隱藏/顯示最接近的UL？
    2021-03-13 03:57
    小方有点小方的博客 I have been using this ... As you can see, it bases on the model of nested ul which builds the tree:我一直在使用這個例子為我的對象構建樹。如您所見,它基於構建樹的嵌套ul模型:AnimalsBirdsMammalsElepha...
  • jquery复选树
    2019-01-10 20:46
    $(this).children('ul').slideToggle(); } }); }); ``` 4. **联动逻辑**：为了实现复选框之间的联动（父节点与子节点、同级节点之间），需要编写额外的JavaScript代码来处理选中状态的同步。 **三、进阶功能** ...
  • jquery写的tree,
    2011-03-06 11:48
    $(this).children('ul').slideToggle(); event.stopPropagation(); // 阻止事件冒泡，防止父节点被折叠 }); }); ``` 实现数据拖动通常需要借助第三方插件，如jQuery UI的Draggable和Droppable功能。首先引入...
  • jQuery实现树形结构菜单
    2021-12-02 17:21
    南初️的博客 script src="js/treemenu.js"></script> <script> //插件中的方法使用和配置 //使用Ajax后端返回菜单的数据 //下面用户可能设置相关配置 $("#menu").Init({ backGround: "#4667d8", color: '#...
  • jQuery递归无限极树状菜单
    2021-04-25 05:29
    $("#treeMenu").on("click", "li", function() { $(this).children("ul").slideToggle("fast"); }); ``` 最后，关于源码下载、JS特效、JS常用代码和菜单导航的标签，这意味着你可以在完成上述代码后，将其封装为一...
  • jquery实现的二级导航代码
    2016-07-27 10:05
    谷中百合0832的博客 js代码：适用于三级导航 (“.menu”).on(“click”,”li”,function(e){ e.stopPropagation(); if((“.menu”).on(“click”,”li”,function(e){ e.stopPropagation(); if((this).
  • jQuery基础之实例对象的方法
    2019-05-15 18:02
    爱吃牛肉的大老虎的博客 目录 1 jQuery实例对象的方法 ...1.1.3 parent方法，parents方法，children方法 1.1.4 siblings方法，nextAll方法，prevAll方法 1.1.5 closest方法，find方法 1.1.6 add方法，addBack方法，e...
  • jquery中左侧属性菜单和发光button案例
    2017-11-10 14:15
    $(this).children("ul").slideToggle("slow"); }); ``` 这段代码将对每个一级菜单项应用点击事件，当点击时，其子菜单将以慢速滑动方式切换显示状态。 对于发光按钮，我们可以设置CSS动画来模拟发光效果。首先，...
  • jQuery树形菜单插件多级菜单选中代码
    2019-10-25 21:46
    $('#treeMenu > li').on('click', function(e) { e.preventDefault(); // 阻止默认的链接行为 $(this).children('ul').slideToggle('fast'); }); // 实现多级菜单的选中效果 $('#treeMenu').on('click', 'li'...
  • 没有解决我的问题, 去提问