单击 <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 {  任何帮助将不胜感激。

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侦听器获取事件，然后帮助我们找出被点击的目标元素。

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