показать / скрыть содержание аккордеона при нажатии на значок внутри <a>

Question

У меня есть простой аккордеон, который построен jquery. Кажется, он работает нормально, но есть несколько проблем ..

Что мне в основном нужно сделать, так это когда кто-то нажимает на текст заголовка на аккордеоне, он должен перенаправляться на эту ссылку, когда я нажимаю на + / - значок, он должен переключать содержимое. Я действительно пытался вызвать щелчок по значку, в этом случае он полностью перенаправляет без отображения содержимого.

Также по умолчанию, как мне показать все содержимое, а не нажав?

Ниже мой код

HTML

<div class="accordion-container">
  <div class="set">
    <a href="http://test.com">
      Vestibulum 
      <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 class="set">
    <a href="http://test2.com">
      Phasellus 
      <i class="fa fa-plus"></i>
    </a>
    <div class="content">
      <p> Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum.</p>
    </div>
  </div>
  <div class="set">
    <a href="http://test.com">
      Praesent 
      <i class="fa fa-plus"></i>
    </a>
    <div class="content">
      <p>Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
  </div>
  <div class="set">
    <a href="http://test.com">
      Curabitur 
      <i class="fa fa-plus"></i> 
    </a>
    <div class="content">
      <p> Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. </p>
    </div>
  </div>
</div>

JS

$(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

Я считаю, что это то, что вам нужно после

$(".set > a").on("click", function(e) {
    if( $(e.target).is('a') ) {
        window.location.assign( $(this).attr("href") );
        return;   // other code doesn't get executed if the redirect was unsuccessful 
    }

     // other code
 });

Как вы видите выше, вам нужно получить событие e от слушателя onclick, которое затем поможет нам выяснить целевой элемент, который был clicked.

С помощью $(e.target).is('a') мы можем проверить, является ли нажатый элемент якорным тегом, и в этом случае мы хотим перенаправить. Если выбранный элемент является дочерним элементом i, указанное выше условие if не будет выполнено.

Проверьте ниже:

Примечание: Сценарий работает, но не изменяет здесь местоположение браузера, поскольку вы используете http:// вместо https://, который заблокирован как небезопасный (проверьте консоль после нажатия).

$(document).ready(function() {
  $(".set > a").on("click", function(e) {
    if( $(e.target).is('a') ) {
      window.location.assign( $(this).attr("href") );
      return;
    }
  
    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);
    }
  });
});

body{
  background-color: #567;
  padding: 0 10px;
  font-family: 'Open Sans', sans-serif;
}
.accordion-container{
  position: relative;
  max-width: 500px;
  height: auto;
  margin: 10px auto;
}
.accordion-container > h2{
  text-align: center;
  color: #fff;
  padding-bottom: 5px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
}
.set{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #f5f5f5;
}
.set > a{
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.set > a i{
  float: right;
  margin-top: 2px;
}
.set > a.active{
  background-color:#3399cc;
  color: #fff;
}
.content{
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display:none;
}
.content p{
  padding: 10px 15px;
  margin: 0;
  color: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/6cea534c30.js"></script>

<div class="accordion-container">
  <div class="set">
    <a href="http://test.com">
      Vestibulum 
      <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 class="set">
    <a href="http://test2.com">
      Phasellus 
      <i class="fa fa-plus"></i>
    </a>
    <div class="content">
      <p> Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum.</p>
    </div>
  </div>
  <div class="set">
    <a href="http://test.com">
      Praesent 
      <i class="fa fa-plus"></i>
    </a>
    <div class="content">
      <p>Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    </div>
  </div>
  <div class="set">
    <a href="http://test.com">
      Curabitur 
      <i class="fa fa-plus"></i> 
    </a>
    <div class="content">
      <p> Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. </p>
    </div>
  </div>
</div>