多点切换和箭头切换

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"

对于这个部分，您可以像下面这样隐藏其他两个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'，‘旋转(90deg)’；

到这个

$(this).find('span').css('transform'，‘旋转(90deg)’；

如果要将箭头返回到其正确位置，则可能需要在元素中包含一个标志或添加/删除一个.rotation类。

Edit2:“如果有一种方法，一旦一个新的”点击我“被切换，那之前打开的箭头能回到它右边的位置吗？”小提琴在这里。

这个想法是：

     $(".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

我想你想要这样的东西

Js Fiddle

$(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', ''); 
}