Question

我创建了一个页面，其中显示了多个框，每个框在右上角有三个垂直点，当您点击这三个点时，它将打开子菜单，我使用了slidetoggle我想要的是当用户点击一个框中的点时它应该只显示一次，但是现在它显示在所有框上，我写的jQuery没有按预期工作。

以下是JSfiddle demo

对于幻灯片切换，我有以下JQuery：

$('.popout_info > a').click(function () {
  $(".popout_info").next().slideToggle(200);
});

任何人都可以建议如何处理这个，如果我为每个DIV分配ID，那么在这种情况下，这些框将是无限数量的，可能是可以动态处理的东西吗？

提前致谢！

Answer 1

您必须更改 jQuery 功能才能实现：

的jQuery

$('.popout_info > a').click(function() {
  $('.popout_list').slideUp(200);
  var nextPopup = $(this).parent(".popout_info").siblings('.popout_list');
  if (!($(nextPopup).is(':visible'))) {
    $(nextPopup).slideToggle(200);
  }
});

此处有您更新的 JSFiddle

如果一个弹出窗口打开以禁止冗余，我已经做了一些修改以隐藏任何其他打开的弹出窗口。

Answer 2

您正在选择每个弹出窗口。尝试使用：

$('.popout_list').slideUp(200);
$(this).closest('.doctor_wrapper').find('.popout_list').slideToggle(400);

Answer 3

您可以使用以下代码来实现此目的。

JS

$('.popout_info > a').click(function () {
    $(this).parent().parent().find(".popout_info").next().slideToggle(200);
  });

或尝试此链接 https://jsfiddle.net/wo1b58wj/7/

Answer 4

我用过：

$('.popout_info > a').click(function () {
        $(this).parent().next().slideToggle(200);
  });

它对我有用。

旁注：很难点击这三个点，因为鼠标左键调整大小/

jQuery Slidetoggle - 仅在一个框上显示/隐藏子菜单

4 个答案:

的jQuery