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

Question

我正在移动的html网站上工作，它有点像应用程序风格，我有很多卡与我正在谈论的切换菜单。通常我们看到内部卡片有切换菜单。它就像Material UI type

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

我做得很简单，但我的问题是多功能按钮和位置问题不起作用。

实际上我希望我的每张卡片菜单位置都能很好地适合屏幕。喜欢原生app风格。我不确定我能否正确解释。

我的代码在这里是卡片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/

当您点击卡片toogle时，您需要处理此上下文（您点击的卡片）。要执行此操作，当您单击菜单切换器时，只需找到此项目的父项。然后，从父母那里下来找到要打开的正确菜单。 ：）