单个页面中的多个切换菜单不起作用

Question

我正在移动HTML网站上工作，有点像应用程序样式，我有很多带有切换菜单的卡片，我正在谈论。 通常我们看到里面的卡有切换菜单 。 就像Material UI类型

这是一个示例http://www.material-ui.com/#/components/icon-menu但是我不想使用任何框架，这就是为什么我不使用它们的代码。 另一个https://codepen.io/pagol/pen/pyBoWr

我做的很简单，但是我的问题不是多个按钮和位置问题。

实际上，我希望我的每个卡菜单位置都能很好地适合屏幕显示。 像本机应用程序样式。 我不确定我能否正确解释。

我的代码在这里，卡片html

 <div class="cards">
        <div class="img-box"><img src="http://lorempixel.com/170/150/sports" alt=""/></div>
        <div class="content">
          <h2>Interviews</h2>
          <h3>Short description</h3>
       <div class="tmenu"><img src="https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/menu2-24.png" alt=""/></div>
       <div class="tmenu-items"><ul><li>Add To Playlist</li><li>Share Facebook</li><li>Download Now</li><li>Go To</li></ul></div>
       </div>
        </div>

JS

$(".tmenu").click(function (e) {
    e.stopPropagation();
    $(".tmenu-items").fadeToggle();
});

$(document).click(function (e) {
    if (!$(e.target).closest('.tmenu-items').length)
    {
        $('.tmenu-items').fadeOut();
    }
});

DEMO

Answer 1

您可以尝试：

$(".tmenu").click(function (e) {
    e.stopPropagation();
    $('.tmenu-items').fadeOut();
    $(this).next(".tmenu-items").fadeToggle();
});

$(document).click(function (e) {
    if (!$(e.target).closest('.tmenu-items').length)
    {
        $('.tmenu-items').fadeOut();
    }
});

编辑

https://jsfiddle.net/Tintin37/kw01nap1/2/

Answer 2

只需使用正确的上下文和.find()函数。

看这个： https : //jsfiddle.net/8mx7gjjr/2/

当您单击卡片时，您需要在此上下文（单击的卡片）上进行操作。 为此，当您单击菜单切换器时，只需找到此项的父项即可。 比起父级，向下找到要打开的菜单。 :)