2

I would like to add the function to close the menu if I click outside the menu.

And also keep the menu button working to close it too: https://jsfiddle.net/ezkay/1he5bhzt/

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    });
});

Also can you tell me if this is correct for mobile etc? I hope and think so, because it's using .click, right?

This is referring to this post, that I can't reply to the answer to ask there: How to change drop-down menu to drop-up menu

Community
  • 1
  • 1
ezkay
  • 119
  • 1
  • 2
  • 9

3 Answers3

3

DEMO

The following does the trick. 

$(document).on('click',function (e) {
  footerUl = $('ul:first li');
  if (!footerUl.is(e.target) 
      && footerUl.has(e.target).length === 0){
    footerUl.children('ul').hide();
  }
});


$(document).ready(function () {
  $("li").click(function () {
    $('li > ul').not($(this).children("ul").toggle()).hide();
  });
});

$(document).on('click',function (e) {
  footerUl = $('ul:first li');
  if (!footerUl.is(e.target) 
      && footerUl.has(e.target).length === 0){
    footerUl.children('ul').hide();
  }
});
div {
    background: #999999;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #000000;
    margin: -8px;
    width:100%;
    position:fixed;
    bottom:0px;
}
ul, li, a {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000000;
}
ul > li {
    float: right;
}
ul > li a {
    color: #fff;
    font-weight: bold;
    line-height: 40px;
    height:40px;
    display:block;
    padding:0px 10px;
}
ul li a:hover {
    background: #666666;
}
ul li ul {
    display: none;
    position: absolute;
    background: #333333;
    bottom:40px;
    width: 200px;
    right: 0px;
}
ul li ul li {
    float: none;
    line-height: 40px;
    height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <ul>
        <li><a href="#">=</a>

            <ul>
                <li><a href="#">one</a>
                </li>
                <li><a href="#">two</a>
                </li>
                <li><a href="#">three</a>
                </li>
            </ul>
        </li>
    </ul>
</div>
rrk
  • 15,677
  • 4
  • 29
  • 45
0

I would attach click event to the document and then check for child elements. Assuming your LI element has class "menu":

$(document).click(function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("menu")) {
        //close menu here
    }
});
rrk
  • 15,677
  • 4
  • 29
  • 45
Victor Levin
  • 1,167
  • 6
  • 11
  • Thank you! But I'm don't understand how to get this working -.- Probably I have to give classes to all the ul and li. But witch one needs `.menu? – ezkay Aug 13 '15 at 19:08
0

Assuming that you want to close when somebody clicks outside the ul tag. You need to capture all click events in the document. And then check if the click happened outside the ul tag. If it was outside then close the menu

var myelement = $('ul')
$(document).on('click', function(e) {
    var el = e.target();
    if(!$.contains(myelement, el)) { //checks if the click happened outside the ul tag
        //close menu
    }
})
Golak Sarangi
  • 809
  • 7
  • 22
  • Basically you need to capture all the clicks in the document. Check if the click was within Doms in your menu. If not then it is a click outside the menu. – Golak Sarangi Aug 13 '15 at 19:12
  • Thank you for posting an answer to this question! Code-only answers are discouraged on Stack Overflow, because a code dump with no context doesn't explain how or why the solution will work, making it difficult for the original poster (or any future readers) to understand the logic behind it. Please, edit your question and include an explanation of your code so that others can benefit from your answer. Thanks! – Maximillian Laumeister Aug 13 '15 at 20:51