下拉菜单错误关闭和打开取决于单击区域

Question

我不知道为什么会这样。我用html、css和jquery复制了手风琴，我遵循了这个指南，并将它改编为我的网站"http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/“。

我的jquery是相同的，我的html和css有一点不同，因为我定制了它，但基本相同。

HTML：

<div class="plan-container" style="flex: 0 0 25%;">
  <div class="plan-header-mec">
    <h2 style="color: #fff; font-weight: lighter; margin: 0; padding-top: 0.625em;">Blabla</h2>
  </div>
  <div class="plan-details">
    <div class="accordion">
      <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">
          <li class="fa fa-check">Title</li>
        </a>
        <div id="accordion-1" class="accordion-section-content">
          <p>Information.</p>
        </div>
        <!--end .accordion-section-content-->
      </div>
      <!--end .accordion-section-->

      <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-2">
          <li class="fa fa-check">Title</li>
        </a>
        <div id="accordion-2" class="accordion-section-content">
          <p>Information</p>
        </div>
        <!--end .accordion-section-content-->
      </div>
      <!--end .accordion-section-->

      <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-3">
          <li class="fa fa-check">Title</li>
        </a>
        <div id="accordion-3" class="accordion-section-content">
          <p>Information</p>
        </div>
        <!--end .accordion-section-content-->
      </div>
      <!--end .accordion-section-->

      <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-4">
          <li class="fa fa-check">Title</li>
        </a>
        <div id="accordion-4" class="accordion-section-content">
          <p>Information</p>
        </div>
        <!--end .accordion-section-content-->
      </div>
      <!--end .accordion-section-->

      <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-5">
          <li class="fa fa-check">Title</li>
        </a>
        <div id="accordion-5" class="accordion-section-content">
          <p>Information</p>
        </div>
        <!--end .accordion-section-content-->
      </div>
      <!--end .accordion-section-->
    </div>
    <!--end .accordion-->
    <p>Conclusion</p>
  </div>
</div>

CSS：

@media handheld (min-width: 480px) {
  .plan-container {
    display: inline-block;
  }
}

@media (min-width: 992px) {
  .plan-container {
    display: table-cell;
  }
}

@media (min-width: 1200px) {
  .plan-container {
    display: table-cell;
  }
}

.plan-container {
  width: 50%;
  overflow: hidden;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  top: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.plan-container .plan-header-mec {
  padding: 50px 0;
  border-radius: 5px 5px 0 0;
  background-image: url(../img/mv-ber-vantagens-mecanico.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
}

.plan-container .plan-header p {
  margin: 0;
  color: #447F71;
}

.plan-container .plan-details {
  margin: 0 auto;
  padding: 60px;
  background: url("http://raventools.com/wp-content/themes/raven-wp-theme-2014/images/plan-bottom-border.png") top center no-repeat;
}

.plan-container .plan-details ul {
  padding-left: 0;
  list-style: none;
}

.plan-container .plan-details ul li span {
  font-weight: lighter;
  /*color: #777777;*/
}

.plan-container .plan-details p {
  background-color: #f4f4f4;
  margin: 2em 0;
  padding: 1.25em;
  font-size: 0.75em;
  line-height: 1.8;
  color: #777777;
}


/* Test accordion */

.accordion,
.accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background: #f7f7f7;
  background-image: url(../img/fibra-carbono.jpg);
}


/*----- Section Titles -----*/

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border-bottom: 2px solid #333333;
  /*Carbon Fiber Background*/
  /*Carbon Fiber Background*/
  transition: all linear 0.15s;
  /* Type */
  font-size: 20px;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0px 1px 0px #1a1a1a;
  color: #fff;
}


/*.accordion-section-title.active, .accordion-section-title:hover {
        background:#4c4c4c;
    }*/

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}


/*----- Section Content -----*/

.accordion-section-content {
  padding: 15px;
  display: none;
}


/* Test accordion */


/* Check Mark Color*/

.fa ul {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.fa-check {
  display: block;
}

.fa-check::before {
  color: #66ff33;
}


/* Check Mark Color*/

最后我的jQuery

/*Accordion*/
$(document).ready(function() {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();
      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }

    e.preventDefault();
  });
});

好吧现在我的问题是。我想要的是:当我点击标题1，信息1下拉。(works)如果我单击标题2。当信息1显示时，信息1关闭并打开信息2 (works)

现在我的问题是，如果信息2是打开的，我想关闭它，当我点击标题，在标题的字母上，下拉列表关闭并再次打开.如果我点击外面的字母，它的工作正常。

在jquery中

if($(e.target).is('.active')) {

我将e.target更改为.accordion-section-title，所发生的情况是，当我单击任何地方、字母或信件外部时，它都会打开和关闭，但是如果打开一个信息框，然后单击另一个，另一个没有打开，但打开的那个关闭。

我不知道还能做些什么，如果你能帮忙，我会接受的。

Answer 1

可能您的e.target有时是错误的元素，实际上它取决于您实际单击的位置。

例如，如果单击子元素(如您的示例中的<li>元素)，条件$(e.target).is('.active')将失败。

尝试使用以下代码：

 $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var target = $(e.target).closest(".accordion-section-title");
    var currentAttrValue = $(target).attr('href');

    if($(target).is('.active')) {

Answer 2

没有确切的答案(还没有50的声誉，所以我不能评论，对不起)，但是有(好的)吗？为什么不使用JQueryUI手风琴？

如果您不想使用所有的jQueryUI (我可以理解)，您可以“隔离”自定义下载部分的手风琴插件。

我可能比你想写的更简单。