我正在尝试这样做，以便在单击.toggle菜单时，数据目标切换一个类，而其他div则展开

Question

我正在尝试这样做，当单击.toggle-menu时，data-target会切换一个类，而其他div会展开。

jQuery(document).ready(function() {
var windowWidth = jQuery(window).width();

if (windowWidth <= 768)
jQuery('.panel-collapse').removeClass('in');
jQuery('.toggle-menu').click(function() {
// get this data-target
var target = $(this).data("target");
$(target).toggleClass('in');
});
});

.toggle-menu {
cursor: pointer;
}
.col .collapse.in {
display: block;
}
.col .collapse {
display: none;
}

<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 in">
<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 in">
<p>
Show cloth
</p>
</div>
</div>

有什么想法吗？谢谢

Answer 1

您可以找到所有已经有.in的类(其中显示了.in(并删除该类。当你想切换被点击的内容时，你需要在从其他内容中删除时将其排除：

$(".in").not(target).removeClass("in");

更新小提琴：

jQuery(document).ready(function() {
var windowWidth = jQuery(window).width();
if (windowWidth <= 768)
jQuery('.panel-collapse').removeClass('in');
jQuery('.toggle-menu').click(function() {
// get this data-target
var target = $(this).data("target");
$(".in").not(target).removeClass("in");
$(target).toggleClass('in');
});
});

.toggle-menu {
cursor: pointer;
}
.col .collapse.in {
display: block;
}
.col .collapse {
display: none;
}

<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 in">
<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 in">
<p>
Show cloth
</p>
</div>
</div>

编辑：具有切换的基本加号/减号

jQuery(document).ready(function() {
var windowWidth = jQuery(window).width();
if (windowWidth <= 768) {
jQuery('.panel-collapse').removeClass('in');
$(".plus,.minus").toggle();
}
jQuery('.toggle-menu').click(function() {
// get this data-target
var target = $(this).data("target");
$(".in").not(target).removeClass("in");
$(target).toggleClass('in');
$(this).closest(".day-header").find(".plus,.minus").toggle();
});
});

.toggle-menu {
cursor: pointer;
}
.col .collapse.in {
display: block;
}
.col .collapse {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="day-header">
<h4>
<span class='plus' style='display:none;'>+</span>
<span class='minus'>-</span>
<a class="toggle-menu" data-target="#foot">Footware</a>
</h4>
</div>
<div id="foot" class="panel-collapse collapse in">
<p>
Show footware
</p>
</div>
</div>
<div class="col">
<div class="day-header">
<h4>
<span class='plus' style='display:none;'>+</span>
<span class='minus'>-</span>
<a class="toggle-menu" data-target="#cloth">cloths</a>
</h4>
</div>
<div id="cloth" class="panel-collapse collapse in">
<p>
Show cloth
</p>
</div>
</div>