功能定制问题(点击显示以下部分)

Question

我在为客户创建的网站上发现的一个函数有问题。您可以在以下链接中查看https://synth-form.com/?page_id=1394.当你点击刀片型号(有型号1和型号2(时，该功能就会发挥作用，基本上会显示下面的部分，以及每个产品的具体规格。

你可以看到的问题是，当你点击一个，然后点击另一个时，该部分会添加到已经打开的部分下面。

当你点击另一个时，我需要之前打开的部分自动关闭。

这里是我用来实现结果的代码。

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$(this).closest('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
});
});
});
</script>
<style>
.showme > div > div > a , .showme > div > div > div > i , .showme > div > div > img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened > div > div > div > i , .opened > div > div > img{
}
</style>

然后我将CSS ID显示给我部分。对于BLADE 2，我复制并粘贴了javascript函数，并将其命名为showme2。

有人能帮我吗？我对Javascript没有任何了解。

提前感谢

Answer 1

下面是一个例子：

JavaScript:

$('.showme').click(function () {
// gets unique element for section
// #first_section.elementor-section
let target = $('#' + $(this).data('target') + '.elementor-section');
// check if opened
if(target.is(':visible')) {
target.slideUp();
}
else {
// close all other elements if visible except current clicked.
$.each($('.elementor-section'), function () {
if($(this).get(0) !== target) {
if($(this).is(':visible')) {
$(this).slideUp();
}
}
});
// open current
target.slideDown();
}
});

HTML:

<!-- Buttons -->
<button class="showme" data-target="first_section"></button>
<button class="showme" data-target="second_section"></button>
<!-- Sections -->
<section id="first_section" class="elementor-section"></section>
<section id="second_section" class="elementor-section"></section>

或者查看现场演示：JSitor-现场演示