如何為一個手風琴進行多個活動切換？

Question

我有一個我正在嘗試創建的產品功能 map。 我能夠讓手風琴工作並且切換來觸發手風琴，但是我如何在“+”上設置活動狀態。 我在這里設置了它： https://jsfiddle.net/oz45ajq1/我希望當單擊“+”按鈕或單擊手風琴時，它會將相應的“+”和手風琴更新為活動狀態。 因此，如果有人點擊手風琴，“+”會發生變化，並向用戶顯示該功能在產品上的位置。

這是我的 js fiddle 中的一些代碼：

<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 active" href="#" onclick='$("#acc1").click()'><i class="fa fa-plus"></i></a>
<a id="map-marker-2" class="map-marker" href="#" onclick='$("#acc2").click()'><i class="fa fa-plus"></i></a>
<a id="map-marker-3" class="map-marker" href="#" onclick='$("#acc3").click()'><i class="fa fa-plus"></i></a>
<a id="map-marker-4" class="map-marker" href="#" onclick='$("#acc4").click()'><i class="fa fa-plus"></i></a>
</div>

Answer 1

編輯：將您的 JS 代碼更改為：這應該是您正在尋找的功能。 它不是最好的代碼，但它應該能得到你想要的。

$(document).ready(function() {
  $(".set > a, .fa fa-plus").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);
    }
  });
            $(document).on('click','.map-marker', function(){
      $(this).each(function(){
      $('#map-marker-1').removeClass('active');
      $('#map-marker-2').removeClass('active');
      $('#map-marker-3').removeClass('active');
      $('#map-marker-4').removeClass('active');
        if($(this).hasClass('active')){
              $(this).removeClass('active');
        }
        else{
              $(this).addClass('active');
                }
            });
        });

    $(document).on('click','.set > a', function(){
      $(this).each(function(){
      var accrIdNum = $(this).attr('id').replace('acc','');
      $('.map-marker').each(function(){
      var plusSignIdNum = $(this).attr('id').replace('map-marker-','');
      if(accrIdNum === plusSignIdNum){
          $(this).addClass('active');
      }
      else{
          $(this).removeClass('active');
      }
      });
    });
  });
});