这个问题的根本原因是在动态生成的元素上绑定了点击事件，导致点击事件无法触发。解决这个问题的方法是使用事件委托，将点击事件绑定在父级元素上，然后通过事件冒泡机制，捕获到被点击的子元素。
以下是修改后的代码：
let str = ""; for (let i = 0; i < hso.list.length; i++) { if (hso.list[i].pid === 0) { str += ` <div class="item-title"> <img src="./img/down.png" class="down-thi" alt="" /> ${hso.list[i].title} </div>`; } else if (hso.list[i].pid === 1 || hso.list[i].pid === 5 || hso.list[i].pid === 9 || hso.list[i].pid === 13) { str += ` <div class="item-child">${hso.list[i].title}</div> `; } } $(".item").html(str); // 显示二级档级 $(".item").on("click", ".item-title", function() { let isRotated = $(this).hasClass("rotated"); // 切换下拉按钮的样式 if (!isRotated) { $(this).addClass("rotated"); } else { $(this).removeClass("rotated"); } // 切换二级档级显示/隐藏 $(this).find(".item-child").toggle(); });
修改后的代码首先移除了原来在<div class="item-title">中直接绑定的onclick="isTitle()"事件。然后使用了$(".item").on("click", ".item-title", function() {})来给.item-title元素绑定点击事件。
在点击事件中，通过$(this)来获取被点击的.item-title元素，然后使用.hasClass("rotated")方法判断该元素是否已经有了rotated类。如果没有该类，则表示下拉框是隐藏的，需要显示；如果已经有了该类，则表示下拉框是显示的，需要隐藏。
最后，使用.addClass("rotated")和.removeClass("rotated")方法来切换下拉按钮的样式，使用.find(".item-child")方法来找到对应的二级档级元素，并使用.toggle()方法来切换它的显示/隐藏状态。
通过这样的事件委托方式，即使是动态生成的元素也能够正确地绑定事件，从而解决了点击事件无法触发的问题。
