点击img#arrow后对应.bottom-sec无法触发jQuery.toggle()的问题求助

咱们先拆解下你代码里的几个核心问题，一步步来解决：

1. 选择器拼接逻辑错误 #

你直接把jQuery对象$parent和字符串拼接，这会导致生成的选择器变成[object Object] .bottom-sec——这完全不是有效的CSS选择器，自然找不到对应的.bottom-sec元素。

错误代码片段：

jQuery($parent +' .bottom-sec').toggle();

正确写法应该用jQuery的.find()方法，从父元素内部精准查找目标元素：

$parent.find('.bottom-sec').toggle();

或者用上下文选择器的写法：

jQuery('.bottom-sec', $parent).toggle();

2. ID选择器的唯一性问题 #

如果你的资料列表有多个项，每个项都用id="arrow"的话，这违反了HTML规范（ID必须是页面唯一的），jQuery只会给第一个匹配的箭头绑定点击事件，其他箭头点击后毫无反应。所以要把id="arrow"改成class="arrow"，再用类选择器绑定事件。

3. 优化后的完整代码 #

结合上面的修复点，再做一点交互上的优化（比如切换active类而不是只添加），完整代码如下：

<!-- 示例HTML结构 -->
<div class="data-item">
  <span>资料标题</span>
  <img src="arrow-icon.png" class="arrow" alt="展开/收起">
  <div class="bottom-sec">
    这里是要显示/隐藏的内容
  </div>
</div>
<div class="data-item">
  <span>资料标题2</span>
  <img src="arrow-icon.png" class="arrow" alt="展开/收起">
  <div class="bottom-sec">
    这里是第二个资料的隐藏内容
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery('.arrow').click(function(){ 
  var $parent = $(this).closest('.data-item'); // 用closest精准定位父容器，比parent()更灵活
  $parent.toggleClass('active'); // 切换active类，实现选中状态的切换
  $parent.find('.bottom-sec').toggle(); 
});
</script>

额外小提示 #

用.closest('.data-item')代替.parent()的原因是：如果箭头的直接父元素不是包含.bottom-sec的容器，.parent()会找错对象，而.closest()会向上查找最近的匹配父元素，适配更多HTML结构场景。

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