Блог

У меня возникли некоторые проблемы с тем, чтобы заставить эту страницу работать так, как мне нужно. Я, наконец, добрался до того, что одновременно будет открываться только 1 из 9 разделов, но я не могу переключать открытие и закрытие этих разделов с помощью одной и той же кнопки запуска. Если бы у них также мог быть какой-то переход, например, раздвижное открытие и закрытие, это тоже было бы здорово. Я только изучаю jquery и, наконец, в тот момент, когда я должен просто спросить экспертов.

https://toyotechus.com/expanding-rows / — это страница, на которой я это настроил.

Это код, который я использую. У меня есть первоначальный сценарий, повторенный для всех 9 разделов, и код переключения под всем этим.

     <script>

        ( function( $ ) {

            'use strict';

            $( document ).ready( function() {

                var $trigger = $( '.open-vc-row-auto1' );

                var $hiddenRow = $( '.vc-row-auto1' );

                if ( $hiddenRow.length ) {
                    $trigger.click( function() {
                        $hiddenRow.toggle();
                        return false;
                    } );
                }

            } );

        } ( jQuery ) );

    </script>   
    <script>
$(".togglerowlink").on("click", function(e) {
    var target = $(this).attr("href");
    $(target).slideToggle('slow');
    $(".vc-row-auto").not(target).hide();
    e.preventDefault();
});
    </script>
  

В идеале этот переключатель открывал бы И закрывал раздел, а не просто открывал его. Также я считаю, что он должен открываться и закрываться между изменениями раздела, но это не так.

Похоже, вы написали отдельные блоки скрипта для открытия и закрытия каждой панели. 9 панелей = 9 блоков скрипта. Этот код открывает и закрывает строки должным образом, но не закрывает все остальные, поэтому у вас может быть открыто 2 или 3 строки одновременно. Это ПЛОХО, потому что вы повторяете код снова и снова и затрудняете его изменение в будущем.

Но тогда вы сделали отличную вещь!! Вы пытались написать ОТДЕЛЬНЫЙ блок скрипта, чтобы закрыть любую панель, которая не должна быть открыта. Это правильная идея, и вы должны применить ее к каждой панели.

Проблемы в первую очередь:

1. Эта строка не работает, потому что у вас нет href атрибутов в ваших HTML-элементах: var target = $(this).attr("href"); Итак target === undefined , и это ничего не дает.
2. Вы слишком конкретизируете свои селекторы. Это var $trigger = $( '.open-vc-row-auto9' ); слишком специфично, чтобы повторно использовать его для всех элементов. Вот почему вам приходится писать это 9 раз.

Решения — для этого потребуется небольшой рефакторинг html, но давайте перечислим наши цели.

1. Напишите один фрагмент кода для управления всеми кнопками. Он должен применять обработчик щелчков ко ВСЕМ кнопкам, и когда кнопка нажата, мы должны знать, на какую конкретную панель пытается нацелиться эта кнопка.
2. Напишите HTML достаточно общий, чтобы обеспечить достижение цели 1. Мы будем использовать data- атрибуты для идентификации кнопок и соответствующих им панелей.

 <style>
.panel { display: none; }
</style>

<!-- buttons -->
<button class="btn" data-target="panel-1">Show Panel 1</button>
<button class="btn" data-target="panel-2">Show Panel 2</button>
<button class="btn" data-target="panel-3">Show Panel 3</button>

<!-- panels -->
<div class="panel" data-panel="panel-1"><h1>This is panel 1.</h1></div>
<div class="panel" data-panel="panel-2"><h1>This is panel 2.</h1></div>
<div class="panel" data-panel="panel-3"><h1>This is panel 3.</h1></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function(){
        // select all buttons
        // get their target
        // if target is open, close it
        // if target is closed, open it, and close all others

        $('.btn').click(function(e){
            e.preventDefault(); 
            var btn = $(e.target);
            var target = btn.attr('data-target'); // panel-1, panel-2, etc.
            var target_panel = $('[data-panel="' target '"]'); // css attribute selector
            var targetIsVisible = target_panel.css('display') === 'block'; // display: block; means it's visible ;)

            if (targetIsVisible === true){
                target_panel.slideUp(); // show the one we want
            } else {
                $('.panel').hide(); // hide all panels that may or may not be open
                target_panel.slideDown(); // show the one we want
            }
        });
    });
</script>
  

ДЕМОНСТРАЦИЯ JS FIDDLE

Вам нужно будет применить концепции к вашему коду, это не идеальное исправление для копирования / вставки. Удачи. Вы получили это!