Javascript 单个页面中的多个切换菜单不工作

我在移动的html网站上工作，这有点像应用程序风格，我有很多我正在谈论的切换菜单卡。通常情况下，我们看到内部卡有切换菜单。它就像是一个材料用户界面类型

这是一个示例

http://www.material-ui.com/#/components/icon-菜单

但我不想使用任何框架，这就是为什么我不使用它们的原因。 另一个

https://codepen.io/pagol/pen/pyBoWr

我做得很简单，但我的问题不是工作多按钮和位置的问题

事实上，我希望我的每张卡的菜单位置都能很好地显示在屏幕上。喜欢本地应用程序风格。我不确定我能不能解释清楚

我的代码在这里

 <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>

您可以尝试：

$(".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();
    }
});

编辑

---

只需使用正确的上下文和

.find（）

函数

看看这个：

---

当你点击卡片图标时，你需要处理这个上下文（你点击的卡片）。为此，当您单击菜单切换器时，只需找到该项的父项。然后，从父菜单中，向下找到要打开的右菜单。：）

非常感谢你。但它对click有效。它应该逐渐消失，再消失一次。这意味着，如果有任何打开的菜单，那么当单击另一个菜单时，它将关闭打开的菜单。有点像从一个打开到另一个关闭。哇，太酷了。美好的我能再问一件事吗。如何打开它，就像你可以检查这个例子：这是一个好的开始：非常感谢你的建议和帮助：）

$(".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();
    }
});