点击.toggle-menu给data-target指定元素加类并收起其他div的实现问题

修改说明 #

• 调整点击事件逻辑：每次点击时先移除所有.panel-collapse元素的展开控制类，再切换当前目标元素的展开类，即可实现其余已展开面板自动收起的效果
• 可根据需求选择继续使用原有in类，或替换为你要求的toggled类，以下给出两套可直接运行的方案

方案1：沿用原有in类（无需修改CSS和HTML，仅改JS即可） #

仅修改JS部分代码就能直接生效：

jQuery(document).ready(function($) {
  var windowWidth = $(window).width();
  
  if (windowWidth <= 768) {
    $('.panel-collapse').removeClass('in');
  }

  $('.toggle-menu').click(function(e) {
    e.preventDefault(); // 阻止a标签默认跳转顶部的行为
    var target = $(this).data("target");
    // 移除所有非当前目标面板的展开类
    $('.panel-collapse').not(target).removeClass('in');
    // 切换当前目标面板的展开状态
    $(target).toggleClass('in');
  });
});

方案2：按需求使用toggled类作为展开控制类 #

需要同步修改JS、CSS、HTML三部分：

JS代码 #

jQuery(document).ready(function($) {
  var windowWidth = $(window).width();
  
  if (windowWidth <= 768) {
    $('.panel-collapse').removeClass('toggled');
  }

  $('.toggle-menu').click(function(e) {
    e.preventDefault();
    var target = $(this).data("target");
    $('.panel-collapse').not(target).removeClass('toggled');
    $(target).toggleClass('toggled');
  });
});

CSS代码 #

.toggle-menu {
  cursor: pointer;
}

.col .collapse.toggled {
  display: block;
}

.col .collapse {
  display: none;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#foot">Footwere</a></h4>
  </div>
  <div id="foot" class="panel-collapse collapse toggled">
    <p>
      Show footwere
    </p>
  </div>
</div>

<div class="col">
  <div class="day-header">
    <h4><a class="toggle-menu" data-target="#cloth">cloths</a></h4>
  </div>
  <div id="cloth" class="panel-collapse collapse toggled">
    <p>
      Show cloth
    </p>
  </div>
</div>

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