如何向下滑動一個標簽並關閉其他所有打開的標簽（JQuery / JavaScript）

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很麻煩。