时间戳

首页 > 解决方案 > 功能定制问题（点击显示以下部分）

javascript - 功能定制问题（点击显示以下部分）

问题描述

我在网上为我为客户制作的网站找到的功能存在问题。您可以通过以下链接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一无所知。

提前致谢

标签： javascripthtmlfunctionelementor

解决方案

这是一个例子：

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 - 现场演示

推荐阅读