javascript - 带箭头切换的多个 div 切换

Question

您好，这是一个二合一的问题。我有以下 fiddle :

Fiddle

我正在努力做到这一点，当菜单切换打开时，箭头会转到向下的位置，然后当菜单关闭时，箭头会返回到向上的位置。我也想要它，这样当另一个“点击我”被点击时，如果另一个打开它会关闭前一个。 Accordion 风格的菜单更容易，但它有多个打开和关闭的 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

“我也希望这样当另一个“Click Me”被点击时如果另一个打开它关闭前一个“

对于这部分，您可以像这样在点击时隐藏其他 2 个 div

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

fiddle here

还在寻找你的第一个问题

编辑:

对于你的第一个问题，改变这一行

$(".dtc-h").find('span').css('transform', 'rotate(90deg)');

对此

$(this).find('span').css('transform', 'rotate(90deg)');

如果您想将箭头返回到正确的位置，您可能需要包含一个标志或向元素添加/删除 .rotation 类

Edit2:“如果有一种方法可以在切换新的“点击我”后将之前打开的切换按钮的箭头返回到其右侧位置？” fiddle here

想法:

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