JQuery 切換到 HTML 部分

Question

我試圖讓 jQuery 監聽對一個 div 的點擊，然后它會帶來另一個 div 使用轉換。

但是，我無法通過切換來實際顯示我的 div 以及我想要顯示的內容。 它會隱藏 section-1 但不會將 section-2 切換到視圖中。

想法：Section-1 包含 HTML 多邊形 Section-2（加載時隱藏）包含數據返回的輸入字段

單擊第 1 節時，jQuery 會隱藏第 1 節並通過過渡將第 2 節切換到視圖中。

HTML：

<!-- start button section -->
        <section class="site-section fullscreen" id="section-1">
          <div class="row justify-content-center">
            <div class="col-md-11">
              <div class="row">
                <h2 class="heading text-uppercase text-white" data-aos="fade-up">Live Feed</h2>
              </div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <polygon onclick="startSim()" points="40,30 65,50 40,70"></polygon>
                    </svg>
            </div>
          </div>
        </section>
<!-- end button section -->

<!-- data fields section -->
<section class="site-section fullscreen" id="section-2" style="display:none">
          <div class="row justify-content-center">
            <div class="col-md-11">

              <div class="row">
                <h2 class="heading text-uppercase text-white" data-aos="fade-up">Live Feed 2!</h2>
              </div>

            </div>
          </div>
        </section>
<!-- data fields section -->

jQuery

$('#section-1').click(function () {

    //Hiding the Start Button Div
    $('#section-1').hide();

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: down };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;
    
    $('#section-2').toggle(effect, options, duration);
});

任何幫助表示贊賞。

Answer 1

正如@charlietfl 指出的那樣，我缺少幻燈片方向的引號。

這修復了它。

$('#section-1').click(function () {

    //Hiding the Start Button Div
    $('#section-1').hide();

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'down' };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;
    
    $('#section-2').toggle(effect, options, duration);
});