jQuery实现分类下拉时仅点击箭头触发切换失效问题求助

核心问题 #

你的代码将点击事件直接绑定到了.cat-parent整个父分类容器上，所以点击容器内任意区域都会触发子分类显隐切换，不符合仅点击箭头触发的需求。

修复后的jQuery代码 #

将事件绑定对象修改为你动态追加的.show箭头元素即可：

$(document).ready(function(){
  $('.cat-parent').each( function( index, element ){
    $(this).append("<span style='float:right;cursor:pointer' class='show'>&#8595;</span>");
    // 仅给箭头元素绑定点击事件
    $(this).find('.show').click(function() {
        // 从箭头向上找到所属父分类容器，再操作对应的子分类
        $(this).closest('.cat-parent').find('ul.children').toggleClass('ok');
    });
  });
});

可选优化（箭头方向切换） #

如果需要点击箭头时同步切换上下方向，可以添加如下代码：

1. 新增CSS样式：

.show.up {
  transform: rotate(180deg);
  transition: all 0.2s ease;
}

2. 修改点击逻辑：

$(this).find('.show').click(function() {
    $(this).toggleClass('up');
    $(this).closest('.cat-parent').find('ul.children').toggleClass('ok');
});

内容的提问来源于stack exchange，提问作者Ferhat