множественное меню переключения на одной странице не работает

Question

Я работаю на сайте html для мобильных устройств, это своего рода стиль приложения, у меня есть много карт с меню переключения, о котором я говорю. обычно мы видим внутри карты, переключаем меню . это похоже на материал 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(); 
    } 
}); 

EDIT

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

Answer 2

Просто нужно использовать правильный контекст и .find() функции.

Посмотрите на это: https://jsfiddle.net/8mx7gjjr/2/

При нажатии на Toogle карты, вы должны работать на этом контексте (карты вы нажимаете на). Чтобы сделать это, когда вы нажимаете на меню toggler, просто найдите родителя этого элемента. Затем, от родителя, спуститесь, чтобы найти нужное меню для открытия. :)