Question

在使该页面正常工作时遇到一些问题。我终于到达了它只能一次打开9个部分中的1个的地方，但是我无法让这些部分使用相同的触发按钮来切换打开和关闭。如果它们也可以有某种过渡，例如滑动打开和关闭，那也将是很好的。我只是在学习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>

理想情况下，此开关将打开并关闭该部分，而不仅仅是打开它。另外，我认为在部分更改之间应该滑动打开和关闭，而不是。

Answer 1

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

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

第一个问题：

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

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

编写一段代码来管理所有按钮。它应该将点击处理程序应用于所有按钮，并且当单击按钮时，我们应该知道该按钮试图定位的特定面板。
编写足够通用的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 DEMO

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

需要滑动切换jquery协助

1 个答案: