Question

我在jQuery UI示例中找到了我需要的内容：Collapsable Content Accordion。

问题是我需要一个content-div来通过menu-button-div来滑动。我发现的每个示例和教程都要求您在内容的正上方有标题。这使得研究变得棘手。

两个问题:::对幻灯片效果进行双重调用，无法弄清楚如何绕过它。单击关联的menu-button-div时，我也无法使content-div崩溃。

$('#menu1').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_about').slideDown(400);
   });
  });

 $('#menu2').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_newsletter').slideDown(400);
   });
  });

 $('#menu3').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_contact').slideDown(400);
   });
  });

Answer 1

您正在对slideDown()效果进行双重调用，因为该动画是在每个其他面板折叠后执行的。由于还有另外两个面板，它将执行两次。

即使它被多次调用，你也必须确保它只对面板动画一次。我使用局部变量来做到这一点，其他解决方案存在（但我不能在你的情况下使用:animated）。

我还使用jQuery的data()工具将每个面板与其触发菜单项相关联，以减少代码重复。结果似乎符合您的要求，如下所示：

$(document).ready(function() {
    $("#menu1").data("panelId", "#collapse_about");
    $("#menu2").data("panelId", "#collapse_newsletter");
    $("#menu3").data("panelId", "#collapse_contact");

    $("#menu1, #menu2, #menu3").click(function() {
        var first = true;
        var panelId = $(this).data("panelId");
        $(".class1").not(panelId).slideUp(function() {
            if (first) {
                first = false;
                $(panelId).slideToggle(400);
            }
        });
    });
});

可以找到更新的小提琴here。

jQuery非UL Accordion / Need标头div与内容div分开

1 个答案: