Javascript jQuery Accordion会立即关闭它'；它打开了

我为一个有手风琴菜单的网站修改了一些jQuery代码

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

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

        if($(e.target).is('.active')) {
            close_accordion_section();
        } else {

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $(currentAttrValue).slideDown(300).addClass('open');
        }

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

手风琴应该保持打开状态，直到再次单击为止，但由于某种原因，它会在打开后立即关闭，有点像是用弹性皮带系着的

我更希望当用户单击手风琴时它才关闭。我复制了下面的.html.erb文件

<div class="copytext text-box col-5">

  <h2>Optimisation, Forecasting, Sales and Marketing Alignment</h2> 

  <div class="accordion-section">
    <a class="accordion-section-title" href="#optimisation-accordbar">Optimisation</a>

    <div id="optimisation-accordbar" class="accordion-section-content">
      <p>In short, optimisation is getting the best out of what you have.</p>
    </div>
  </div>

  <div class="accordion-section">
    <a class="accordion-section-title" href="#margin-improvement-accordbar">Margin Improvement</a>

    <div id="margin-improvement-accordbar" class="accordion-section-content">
      <p>Margin improvement is about making more profit by improving what you already do.</p>
    </div>
  </div>

  <div class="accordion-section">
    <a class="accordion-section-title" href="#forecasting-accordbar">Forecasting</a>

    <div id="forecasting-accordbar" class="accordion-section-content">
      <p>Forecasting is the act of getting the sales team to stop producing works of fantasy and produce figures which production believe enough to manufacture to.</p>
      <p>Aligning sales and marketing is ensuring that marketing activities are such that they drive the sales team towards their turnover targets but now, so that they drive the sales team to sell the products which make the company the greatest profit based on the mix of products they sell.</p>
      <p>We can address all of these areas without telling you about some new specialized piece of machinery would reduce faults, 
    make things faster and replace 5 shop floor operatives.</p>
      <p>In fact, our optimisation models often show that the introduction of an expensive but appropriate piece of automated production will indeed increase the profits as expected, but it often shows up the rather than dismissing the now unwanted labour, the firm can make even greater profits by redeploying them.<p/>
      <p>A sales plan or manufacturing plan or an investment justification plan cannot show the interactions which Linear Programming Optimisation can,
        and often to the shock of the accountants, a labour cost can be a large profit improvement if deployed wisely and modeled correctly.</p>
    </div>
  </div>
</div>

---

如果有人能帮我弄清楚到底发生了什么，以及如何让手风琴保持打开状态，直到用户再次单击它，我将非常感激，因为我已经完成了各种调试步骤，但我仍然无法找出哪里出了问题。

看起来你的问题与做同样的事情两次有关。如果不加载除

jQuery

之外的任何其他库，则代码似乎会关闭所有实例（而不仅仅是当前实例），除非它错误地关闭了多个实例并尝试关闭其中任何实例

我的最佳猜测是您正在加载一些其他脚本/库（可能是

jqueryui

？），它已经为您在元素上使用的

类提供了打开/关闭功能。所以你有两个选择：

使用您正在使用的任何库的当前打开/关闭功能进行滚动-这意味着放弃当前的自定义动画
使用自定义动画滚动，但使用不同的类名，因此库不会为您打开/关闭它们
看起来你的问题与做同样的事情两次有关。如果不加载除
jQuery
之外的任何其他库，则代码似乎会关闭所有实例（而不仅仅是当前实例），除非它错误地关闭了多个实例并尝试关闭其中任何实例

我的最佳猜测是您正在加载一些其他脚本/库（可能是
jqueryui
？），它已经为您在元素上使用的
类提供了打开/关闭功能。所以你有两个选择：

使用您正在使用的任何库的当前打开/关闭功能进行滚动-这意味着放弃当前的自定义动画
使用自定义动画滚动，但使用不同的类名，因此库不会为您打开/关闭它们
这听起来确实是一个很有道理的原因。请稍等一下，我检查一下……我的建议是使用你正在使用的任何东西的内置功能，使用它们的标记（这很重要），但这就是我，总是试图用最少的努力快速完成事情。如果你真的想要一个自定义的动画效果，选择显然是你的。这听起来绝对是一个非常合理的原因。请稍等一下，我检查一下……我的建议是使用你正在使用的任何东西的内置功能，使用它们的标记（这很重要），但这就是我，总是试图用最少的努力快速完成事情。如果您真的想要自定义动画效果，那么选择显然是您的。
/* Transitions */

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

.accordion {
    cursor: pointer;
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
}

.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    background:#eee;
    @include default-border;
    transition:all linear 0.15s;
    font-size:1.200em;
    text-shadow:1px 1px 0px #555;
    text-decoration: none;
}

.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    text-decoration:none;
}

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