需要滑动切换jquery协助 [英] Slide toggle jquery assistance needed

问题描述

我在使此页面正常工作时遇到了一些问题.我终于到达了它只能一次打开9个部分中的1个的位置，但是我无法使用相同的触发按钮来使这些部分切换打开和关闭.如果它们也可以有某种过渡，例如滑动打开和关闭，那也将是很好的.我只是在学习jquery，最后是要问专家的时候.

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/是我拥有的页面设置.

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

这是我正在使用的代码.我对所有9个部分都重复了初始脚本，并在其下方重复了切换代码.

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.

推荐答案

因此，您似乎编写了单独的脚本块来打开和关闭每个面板. 9个面板= 9个脚本块.此代码可以正确打开和关闭行，但不会关闭所有其他行，因此您可以同时打开2或3行.这是错误的，因为您要一遍又一遍地重复代码，并且将来很难更改.

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.

但是随后您做了一件了不起的事情！您试图编写一个SINGLE脚本块来关闭所有不应该打开的面板.这是正确的主意，您应该将其应用于每个面板.

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.

第一个问题:

1. 该行不起作用，因为您没有href属性 您的HTML元素:var target = $(this).attr("href");所以target === undefined，这没有任何作用.
2. 您对选择器的要求太具体了.该var $trigger = $( '.open-vc-row-auto9' );太具体了，以至于无法用于所有元素.这就是为什么您必须编写9次. :(

1. 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.
2. 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. :(

解决方案-这将需要一些html重构，但让我们列出目标.

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

1. 编写一段代码来管理所有按钮.它应该将点击处理程序应用于所有按钮，并且当单击一个按钮时，我们应该知道该按钮要定位的特定面板.
2. 编写足够通用的HTML，以实现目标1.我们将使用data-属性来标识按钮及其相应的面板.

1. 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.
2. 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演示版

您需要将概念应用到代码中，这不是一个完美的复制/粘贴修复程序.祝你好运.你明白了！

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

这篇关于需要滑动切换jquery协助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！