帶箭頭切換的多格div切換

Question

嗨，這是一個二合一的問題。 我有以下小提琴：

小提琴

我正在嘗試使菜單切換為打開狀態時箭頭移至向下位置，然后在菜單關閉時使箭頭方向移至向上位置。 我也希望這樣做，以便在另一個打開的情況下單擊另一個“單擊我”時，它會關閉前一個。 使用手風琴樣式菜單比較容易，但是它具有多個打開和關閉的div。 有什么想法嗎？

 $(document).ready(function () {
     // Toggles 1st Hidden Desktop Div
     $(".dtc-s").click(function () {
         $(".dtc-h").slideToggle(500);
         $(".dtc-h").find('span').css('transform', 'rotate(90deg)');
     });
     // Toggles 2nd Hidden Desktop Div
     $(".dtc-two-s").click(function () {
         $(".dtc-two-h").slideToggle(500);
         $(".dtc-two-h").find('span').css('transform', 'rotate(90deg)');
     });
     // Toggles 3rd Hidden Desktop Div
     $(".dtc-three-s").click(function () {
         $(".dtc-three-h").slideToggle(500);
         $(".dtc-three-h").find('span').css('transform', 'rotate(90deg)');
     });
     // #1
     if ($('.dtc-one').is(':visible')) $(this).next().slideDown();
     $(this).find('span').css('transform', 'rotate(0deg)');
     // #2
     if ($('.dtc-two').is(':visible')) $(this).next().slideDown();
     $(this).find('span').css('transform', 'rotate(0deg)');
     // #3
     if ($('.dtc-three').is(':visible')) $(this).next().slideDown();
     $(this).find('span').css('transform', 'rotate(0deg)'); {}
 });

Answer 1

"I would like it also so that when another "Click Me" is clicked if another is open it closes the previous"

對於這一部分，您可以像這樣隱藏其他2個div

$(".dtc-s").click(function () {
     $(".dtc-h").slideToggle(500);
     $(".dtc-two-h").hide(500);
     $(".dtc-three-h").hide(500);
});

在這里擺弄

還在尋找您的第一個問題

編輯：

對於您的第一個問題，請更改此行

$（“。dtc-h”）. find（'span'）。css（'transform'，'rotate（90deg）'）;

對此

$（this） .find（'span'）。css（'transform'，'rotate（90deg）'）;

如果您想將箭頭返回到正確的位置，則可能需要添加一個標志或將.rotation類添加/刪除到元素

Edit2： “如果有一種方法可以切換新的“ Click Me”，那么先前打開的切換開關的箭頭能否返回到其右位置？ 在這里擺弄

這個想法：

     $(".dtc-two-s").find('span').removeClass('transform'); //not clicked => remove rotation
     $(".dtc-three-s").find('span').removeClass('transform'); //not clicked => remove rotation
     $(this).find('span').toggleClass('transform'); //clicked => add rotation

Answer 2

我想你想要這樣的東西

提斯

$(this).find('span').toggleClass('transform');

Answer 3

         $(document).ready(function () {
         // Toggles 1st Hidden Desktop Div
         $(".dtc-s").click(function () {
             $(".dtc-h").slideToggle(500,function(){checkAll();});
             $(".dtc-two-h").hide(500,function(){checkAll();});
             $(".dtc-three-h").hide(500,function(){checkAll();});
             $(".dtc-s").find('span').css('transform', 'rotate(90deg)');

         });
         // Toggles 2nd Hidden Desktop Div
         $(".dtc-two-s").click(function () {
             $(".dtc-two-h").slideToggle(500,function(){checkAll();});
             $(".dtc-h").hide(500,function(){checkAll();});
             $(".dtc-three-h").hide(500,function(){checkAll();});
             $(".dtc-two-s").find('span').css('transform', 'rotate(90deg)');
         });
         // Toggles 3rd Hidden Desktop Div
         $(".dtc-three-s").click(function () {
             $(".dtc-three-h").slideToggle(500,function(){checkAll();});
             $(".dtc-two-h").hide(500,function(){checkAll();});
             $(".dtc-h").hide(500,function(){checkAll();});
             $(".dtc-three-s").find('span').css('transform', 'rotate(90deg)');
         });
     });
    function checkAll(){
    if ($('.dtc-one').css('display') == 'none') 
     $('.dtc-s').find('span').css('transform', '');

     if ($('.dtc-two').css('display') == 'none') 
     $('.dtc-two-s').find('span').css('transform', '');

     if ($('.dtc-three').css('display') == 'none') 
     $('.dtc-three-s').find('span').css('transform', ''); 
}