jQuery点击切换div显隐与箭头类名仅生效一次问题咨询

你代码存在4处核心错误导致无法循环切换：

• 类选择器写错：切换箭头样式时用了不存在的.TrainArrow选择器，实际箭头的类是.Train，这会导致第一次点击后箭头类没有被正确修改，后续点击判断条件无法命中
• 全局操作容器：直接选择所有.TrainContainer会导致点击任意箭头时所有卡片同步展开/收起，不符合多模块独立控制的需求
• 类名判断逻辑不合理：拼接全类名的方式扩展性极差，后续如果给箭头加其他类会直接导致判断失效，用jQuery内置的hasClass()方法更可靠
• 未阻止a标签默认行为：箭头是a标签，点击会触发页面跳转到顶部的默认行为，影响体验

jQuery(document).ready(function($) {
  // 初始化箭头和默认隐藏容器
  var TrainArrowUp = $('<a href="#" class="Train ArrowUp"></a>')
  $(".TrainTransportHeading").append(TrainArrowUp);
  $(".TrainContainer").hide()

  // 点击事件处理
  $(document).on('click', '.Train', function(e) {
    // 阻止a标签默认跳转
    e.preventDefault()
    // 获取当前点击箭头所属的卡片容器
    const $currentCard = $(this).closest('.TrainOuterContainer')
    // 切换当前卡片内的内容显示状态
    $currentCard.find('.TrainContainer').toggle()
    // 切换当前箭头的样式
    $(this).toggleClass('ArrowUp ArrowDown')
  });
});

• 用closest() + find() 实现点击箭头只控制对应卡片的内容展开收起，多模块之间互不影响
• 用toggle()方法直接切换显示隐藏状态，不需要手写if-else判断
• 用toggleClass()同时切换两个互斥的箭头类，代码更简洁易维护
• 增加e.preventDefault()阻止a标签默认跳转行为

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