pagol pagol - 6 months ago 17
Javascript Question

multiple toggle menu in a single page not working

i am working on html site for mobile, it is kind of like app style, i have many card with toggle menu which i am talking about. normally we see inside card have toggle menu enter image description here. it like Material UI type

this is one sample

http://www.material-ui.com/#/components/icon-menu
but i don't want to use any framework that's why i don't use them code.
another one
https://codepen.io/pagol/pen/pyBoWr


i did very simply but my problem it is not work multiple button and position problem.

actually i want my each card menu position will be nicely fit on screen. like native app style. i am not sure i can explain properly or not.

my code is here card 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

You can try that :

$(".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/