在多个元素上显示/隐藏 JavaScript

Question

到目前为止，我有一个代码，当我按下带有 class.coureNavToggle 的元素时，它会显示带有.courseNavMenu class 的元素。 有人可以帮我优化这段代码，以便我可以在多个元素上使用多个不同的按钮吗？ 例如，如果我单击按钮 A，它会打开元素 A、按钮 B -> 元素 B 等。一种选择是复制和粘贴代码并更改类......但这不是我需要的。 据我了解，这可以通过为按钮和元素分配第二个 class 来实现，但我对 Javascript 知之甚少。 任何帮助，将不胜感激。 顺便说一句，它适用于 Elementor(Wordpress)。

jQuery(document).ready(function( $ ){
    
  var hbtn = $(".courseNavToggle");
  var hcon = $(".courseNavMenu");
  
   hcon.hide();
   hbtn.click(function(e) {
   var index = hbtn.index(this) 
   $(hcon).eq(index).slideToggle("slow");

   e.preventDefault();     
    });
});

Answer 1

在某些时候，您需要添加一些东西来将“点击”元素分配给您想要切换的“目标”元素。 幸运的是，JavaScript（和 jQuery）使这非常容易。 您可以将任意数据属性添加到元素，并将其用作选择器。

以下面的例子为例。 我已将data-target-toggle属性添加到前三个元素中。 两个 ID 选择器和一个 class 选择器。

您可以遍历添加到该变量的每个元素，并立即获取所需的目标元素。 在同一个循环中，您可以处理单击事件以在目标上使用slideToggle function。

我混合使用了 id、类和元素类型来表明使用这样的方法是真正抽象的。

只需将data-toggle-target="#some-id"或data-toggle-target=".some-class" （或者实际上，任何有效的查询选择器）添加到您要单击的元素，并确保您使该选择器可用，当您单击该元素时它会滑动切换。

 jQuery(document).ready(function($){ var $hbtn = $('[data-toggle-target]'); $hbtn.each(function(){ var selector = $(this).attr('data-toggle-target'); var $hcon = $(selector); $hcon.hide(); $(this).on('click', function(e){ e.preventDefault(); $hcon.slideToggle("slow"); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" data-toggle-target="#first">Toggle First</a> <span data-toggle-target=".second">Toggle Second</span> <button data-toggle-target="#third">Toggle Third</button> <hr /> <div id="first">This is the ID first</div> <h2 class="second">This is the CLASS second</h2> <p id="third">This is the ID Third</p> <a href="#" class="second">This is also CLASS second</a>