Question

嗨，这是一个二合一的问题。我有以下小提琴：

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

fiddle here

仍在寻找你的第一个问题

修改

第一个问题改变了这一行

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

到这个

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

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

编辑2：“如果切换新的”点击我“后，前一个打开的切换的箭头是否会返回到其右侧位置？” 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

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

带箭头切换的多个div切换

3 个答案: