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 ，除非它錯誤地關閉所有實例而不是當前實例，當您有多個打開並嘗試關閉其中任何一個時。

我最好的猜測是你正在加載一些其他腳本/庫（可能是jQuery-ui ？），它已經為你在元素上使用的class提供了開/關功能。 所以你有兩個選擇：

1. 使用您正在使用的任何庫的當前打開/關閉功能滾動 - 這意味着放棄您當前的自定義動畫。
2. 使用自定義動畫滾動但使用不同的類名，因此庫不會為您打開/關閉它們。