单击 <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) {&nbsp; &nbsp; if( $(e.target).is('a') ) {&nbsp; &nbsp; &nbsp; &nbsp; window.location.assign( $(this).attr("href") );&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp;// other code doesn't get executed if the redirect was unsuccessful&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;// other code&nbsp;});正如您在上面看到的，您需要e从onclick侦听器获取事件，然后帮助我们找出被点击的目标元素。$(e.target).is('a')我们可以检查被点击的元素是否是一个锚标签，在这种情况下我们需要一个重定向。如果单击的元素是子元素，则不满足i上述条件。if检查以下：注意：该脚本有效，但不会在此处更改浏览器位置，因为您正在使用http://而不是https://被阻止为不安全（单击后检查控制台）。$(document).ready(function() {&nbsp; $(".set > a").on("click", function(e) {&nbsp; &nbsp; if( $(e.target).is('a') ) {&nbsp; &nbsp; &nbsp; window.location.assign( $(this).attr("href") );&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; if ($(this).hasClass("active")) {&nbsp; &nbsp; &nbsp; $(this).removeClass("active");&nbsp; &nbsp; &nbsp; $(this)&nbsp; &nbsp; &nbsp; &nbsp; .siblings(".content")&nbsp; &nbsp; &nbsp; &nbsp; .slideUp(200);&nbsp; &nbsp; &nbsp; $(".set > a i")&nbsp; &nbsp; &nbsp; &nbsp; .removeClass("fa-minus")&nbsp; &nbsp; &nbsp; &nbsp; .addClass("fa-plus");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $(".set > a i")&nbsp; &nbsp; &nbsp; &nbsp; .removeClass("fa-minus")&nbsp; &nbsp; &nbsp; &nbsp; .addClass("fa-plus");&nbsp; &nbsp; &nbsp; $(this)&nbsp; &nbsp; &nbsp; &nbsp; .find("i")&nbsp; &nbsp; &nbsp; &nbsp; .removeClass("fa-plus")&nbsp; &nbsp; &nbsp; &nbsp; .addClass("fa-minus");&nbsp; &nbsp; &nbsp; $(".set > a").removeClass("active");&nbsp; &nbsp; &nbsp; $(this).addClass("active");&nbsp; &nbsp; &nbsp; $(".content").slideUp(200);&nbsp; &nbsp; &nbsp; $(this)&nbsp; &nbsp; &nbsp; &nbsp; .siblings(".content")&nbsp; &nbsp; &nbsp; &nbsp; .slideDown(200);&nbsp; &nbsp; }&nbsp; });});body{&nbsp; background-color: #567;&nbsp; padding: 0 10px;&nbsp; font-family: 'Open Sans', sans-serif;}.accordion-container{&nbsp; position: relative;&nbsp; max-width: 500px;&nbsp; height: auto;&nbsp; margin: 10px auto;}.accordion-container > h2{&nbsp; text-align: center;&nbsp; color: #fff;&nbsp; padding-bottom: 5px;&nbsp; margin-bottom: 20px;&nbsp; padding-bottom: 15px;&nbsp; border-bottom: 1px solid #ddd;}.set{&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: auto;&nbsp; background-color: #f5f5f5;}.set > a{&nbsp; display: block;&nbsp; padding: 10px 15px;&nbsp; text-decoration: none;&nbsp; color: #555;&nbsp; font-weight: 600;&nbsp; border-bottom: 1px solid #ddd;&nbsp; -webkit-transition:all 0.2s linear;&nbsp; -moz-transition:all 0.2s linear;&nbsp; transition:all 0.2s linear;}.set > a i{&nbsp; float: right;&nbsp; margin-top: 2px;}.set > a.active{&nbsp; background-color:#3399cc;&nbsp; color: #fff;}.content{&nbsp; background-color: #fff;&nbsp; border-bottom: 1px solid #ddd;&nbsp; display:none;}.content p{&nbsp; padding: 10px 15px;&nbsp; margin: 0;&nbsp; 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">&nbsp; <div class="set">&nbsp; &nbsp; <a href="http://test.com">&nbsp; &nbsp; &nbsp; Vestibulum&nbsp;&nbsp; &nbsp; &nbsp; <i class="fa fa-plus"></i>&nbsp; &nbsp; </a>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="set">&nbsp; &nbsp; <a href="http://test2.com">&nbsp; &nbsp; &nbsp; Phasellus&nbsp;&nbsp; &nbsp; &nbsp; <i class="fa fa-plus"></i>&nbsp; &nbsp; </a>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; <p> Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum.</p>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="set">&nbsp; &nbsp; <a href="http://test.com">&nbsp; &nbsp; &nbsp; Praesent&nbsp;&nbsp; &nbsp; &nbsp; <i class="fa fa-plus"></i>&nbsp; &nbsp; </a>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; <p>Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna.</p>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="set">&nbsp; &nbsp; <a href="http://test.com">&nbsp; &nbsp; &nbsp; Curabitur&nbsp;&nbsp; &nbsp; &nbsp; <i class="fa fa-plus"></i>&nbsp;&nbsp; &nbsp; </a>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; <p> Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. </p>&nbsp; &nbsp; </div>&nbsp; </div></div>