Slide toggle jquery assistance needed

问题

I'm having some problems getting this page to work like I need it to. I finally got it to where it'll only allow 1 of the 9 sections open at a time but I can't get these sections to toggle open and close using the same trigger button. If these could have some sort of transition as well, such as sliding open and close, that would be great too. I'm just learning jquery and finally at a point where I should just ask the experts.

https://toyotechus.com/expanding-rows/ is the page I have this set up on.

This is the code I'm using. I have the initial script repeated for all 9 sections and the toggle code below it all.

    <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>

Ideally this toggle would open AND close the section, not just open it. Also I believe it should be sliding open and closed between section changes and it's not.

回答1:

So it looks likes you wrote individual script blocks to open and close each panel. 9 panels = 9 script blocks. This code opens and closes the rows properly, but doesn't close all the other ones, so you can have 2 or 3 rows open at the same time. This is BAD because you're repeating code over and over again, and making it difficult to change in the future.

But then you did a great thing!! You tried to write a SINGLE script block to close any panel that shouldn't be open. That's the right idea, and you should apply it to every panel.

Problems first:

This line doesn't work because you don't have href attributes on your HTML elements: var target = $(this).attr("href"); So target === undefined and this does nothing.
You're being too specific with your selectors. This var $trigger = $( '.open-vc-row-auto9' ); is far far too specific to be reused for all the elements. That's why you have to write it 9 times. :(

Solutions - this will require a little html refactoring, but lets list our goals.

Write one piece of code to manage all buttons. It should apply the click handler to ALL buttons, and when a button is clicked, we should know what specific panel that button is trying to target.
Write HTML generic enough to allow for Goal 1 to be achieved. We will use data- attributes to identify buttons, and their corresponding panels.

<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 DEMO

You'll need to apply the concepts to your code, it's not a perfect copy/paste fix. Good luck. You got this!

来源：https://stackoverflow.com/questions/55423176/slide-toggle-jquery-assistance-needed