Блог

Главная - Вопросы по программированию - Переключение jQuery с разделами HTML

Переключение jQuery с разделами HTML

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я пытаюсь заставить jQuery прослушивать щелчок по div, который затем вводит другой div с использованием перехода.

Однако я не могу заставить переключатель фактически отображать мой div с содержимым, которое я хочу показать. Это скроет раздел-1, но не отобразит раздел-2.

Идея: Раздел-1 содержит HTML-полигон, Раздел-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);
});

Приветствуется любая помощь.

Комментарии:

1. Где down определено? Возникли какие-либо ошибки?

2. значение down не определено. Я взял ссылку из скрипта. находится здесь: jsfiddle.net/5bws1kue

3. Затем вам нужно заключить его в кавычки как строку { direction: 'down' }

4. @charlietfl Кавычки исправили это, спасибо.

5. Итак, если вы откроете консоль инструментов разработчика браузера (F12), вы увидите там сообщение об ошибке «значение down не определено», и это было бы большой подсказкой

Ответ №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);
});