Как вы можете сделать несколько переключателей для одного аккордеона? - PullRequest
Новая
       10

Как вы можете сделать несколько переключателей для одного аккордеона?

0 голосов
/ 04 октября 2019

У меня есть карта возможностей продукта, которую я пытаюсь создать. Мне удалось заставить аккордеоны работать, но как сделать так, чтобы кнопки «+» на изображении продукта также вызывали соответствующий аккордеон?

https://jsfiddle.net/rza4hs16/1/

Вот некоторые из моих скопированныхкод из 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);
    }
  });
});

Ответы [ 2 ]

1 голос
/ 04 октября 2019

Это хорошая возможность использовать атрибут 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();
});

Кроме того, поскольку лучше не запускать код путем эмуляции событий, было бы хорошо переместить код аккордеона из обработчика событий вотдельная функция, и оба обработчика событий вызывают ее.

1 голос
/ 04 октября 2019

Добавить и 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/

...