Question

这是我的代码：

<script>                                                            
    $(document).ready(function () { 

        $('#t1').click(function() {  
            $('#p1').slideToggle('slow');
            $("#pm1, #pm1h").toggle(0); 
            removeContainer();
            $("#load1").load('file', showPlayer);   
        });

        $('#t2').click(function() {
            $('#p2').slideToggle('slow');
            $("#pm2, #pm2h").toggle(0);       removeContainer();
            $("#load2").load('file', showPlayer);
        });

        $('#t3').click(function() {
            $('#p3').slideToggle('slow');
            $("#pm3, #pm3h").toggle(0);       removeContainer();
            $("#load3").load('file', showPlayer);
        });

        $('#t4').click(function() {
            $('#p4').slideToggle('slow');
            $("#pm4, #pm4h").toggle(0);       removeContainer();
            $("#load4").load('file', showPlayer);
        });


    });
    </script>

好吧所以我想做的是当有人点击t1，t2，t3或t4时，处于向下滑动位置的所有其他标签都会向上滑动（例如，如果t3和t4关闭，一旦我点击在t1，t3和t4将向上滑动，然后t1将向下滑动）。这将使它一次只能打开一个标签。

我还需要正确的切换以与标签的位置相对应。默认情况下，所有选项卡都是隐藏的，并且都有加号，但是当您单击任何选项卡时，它将展开并显示负号。我保持这一点。

任何人都可以帮助或需要更多澄清吗？

Answer 1

您的四个复制粘贴块可以抽象为一个块，按照以下方式：

$(function () {
  $("div.tab").click(function () {
    var idnum = this.id.replace(/\D/g, ''); // remove all "non-digits" from id

    $("#p"+idnum).slideUp('slow');
    $("div.tab").not(this).slideDown('slow'); // or the other way around

    $("#pm"+idnum+", #pm"+idnum+"h").toggle(0); 
    removeContainer();
    $("#load"+idnum).load('file', showPlayer);   
  });
}

请注意

$()取代$(document).ready()。
not()从集合中删除元素。实际上，这是你寻找的“所有其他人”。
使用CSS类（我使用.tab）来识别和处理元素作为集合。正如您所注意到的那样，使用ID非常麻烦。

如何向下滑动一个选项卡并关闭任何其他打开的选项卡（JQuery / JavaScript）

1 个答案: