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

【问题标题】：jQuery Slidetoggle - show/hide sub menu on one box onlyjQuery Slidetoggle - 仅在一个框中显示/隐藏子菜单
【发布时间】：2016-09-22 06:46:34
【问题描述】：

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

这里是JSfiddle demo

对于滑动切换，我有以下 JQuery：

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

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

提前致谢！

【问题讨论】：

$(this).parent(".popout_info").next().slideToggle(200); 会成功的。
我尝试了上面的代码，但没有成功...
检查这个，stackoverflow.com/questions/39505518/…
这就是我不想要的，因为盒子将是无限的，如果可以动态而不是具有不同的 ID 或类的东西
是的，有效，请将其作为答案发布，以便我接受

标签： javascript jquery html css

【解决方案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

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

【讨论】：

很高兴为您提供帮助 :)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

或者试试这个链接 https://jsfiddle.net/wo1b58wj/7/

【讨论】：

【解决方案4】：

我用过：

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

它对我有用。

附注：很难点击这三个点，因为鼠标进入/离开时框会调整大小

【讨论】：