如何为一个手风琴制作多个开关？

Question

我有一个要创建的产品功能图。我能够让手风琴正常工作，但如何让产品图片上的“+”按钮也触发相应的手风琴？

这是我从 jsfiddle 复制的一些代码：


<div class="accordion-toggle">
<div class="map-container">
<img src="https://i.imgur.com/quhRUKx.jpg" width="500px">
<a id="map-marker-1" class="map-marker" href="#"><i class="fa fa-plus"></i></a>
</div>
<div class="accordion-container">
  <div class="set">
    <a href="#">
   Accordion 1
      <i class="fa fa-plus"></i>
    </a>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
  </div>

</div>
</div>

jquery:

$(document).ready(function() {
  $(".set > a").on("click", function() {
    if ($(this).hasClass("active")) {
      $(this).removeClass("active");
      $(this)
        .siblings(".content")
        .slideUp(200);
      $(".set > a i")
        .removeClass("fa-minus")
        .addClass("fa-plus");
    } else {
      $(".set > a i")
        .removeClass("fa-minus")
        .addClass("fa-plus");
      $(this)
        .find("i")
        .removeClass("fa-plus")
        .addClass("fa-minus");
      $(".set > a").removeClass("active");
      $(this).addClass("active");
      $(".content").slideUp(200);
      $(this)
        .siblings(".content")
        .slideDown(200);
    }
  });
});

Answer 1

将 ID 添加到手风琴

    <a href="#" id="acc1">
         Accordion 1
  <i class="fa fa-plus"></i>
</a>

然后您可以获取手风琴对象并从您的 + 按钮调用点击命令

<a id="map-marker-1" class="map-marker" href="#" onclick='$("#acc1").click()'>

Fiddle: https://jsfiddle.net/ocwus17y/

Answer 2

这是使用 data- 属性的好机会。您可以通过这种方式将用户定义的属性添加到任何 DOM 元素。

<div class="accordion-toggle">
<div class="map-container">
<img src="https://i.imgur.com/quhRUKx.jpg" width="500px">
<a id="map-marker-1" class="map-marker" href="#" data-feature="1" ><i class="fa fa-plus"></i></a>
</div>
<div class="accordion-container">
  <div class="set" data-feature="1" >
    <a href="#">
   Accordion 1
      <i class="fa fa-plus"></i>
    </a>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
  </div>

</div>
</div>

还有你的 JS：

$(".map-marker").click(()=>{
    $('.set[data-feature="' + $(this).attr('data-feature') + '"] > a').click();
});

此外，由于最好不要通过模拟事件来触发代码，因此最好将手风琴代码从事件处理程序中移出到一个单独的函数中，并让两个事件处理程序都调用它。

如何为一个手风琴制作多个开关？

How can you make multiple toggles for one accordion?

html

javascript

jquery

accordion