jQuery 手风琴打开后立即关闭

Question

我已经为我正在使用的具有手风琴菜单的站点修改了一些 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>

SCSS 紧随其后。

/* 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;
}

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

Answer 1

您的问题似乎与重复执行同一操作有关。除了 jQuery 之外没有加载任何其他库，您的代码似乎 work fine，只是它错误地关闭了所有实例而不是当前实例，当您打开多个实例并尝试关闭它们中的任何一个时。

我最好的猜测是您正在加载其他一些 script/library（可能是 jQuery-ui？），它已经为您在元素。所以你有两个选择：

滚动使用您正在使用的任何库的当前 open/close 功能 - 这意味着放弃您当前的自定义动画。
使用您的自定义动画滚动，但使用不同的 class 名称，因此库不会为您 open/close 它们。

jQuery 手风琴打开后立即关闭

jQuery Accordion closes immediately it's opened

javascript

jquery

ruby-on-rails

jquery-ui

jquery-ui-accordion