Need to close dropdown click on click of body

Question

I have my dropdown, it is working on click of its parent anchor tag, but now i want to close it on body click

I have try to do it with event.stopPropagation(); but it didn't work, here is my code -

$(".mydropd > a").click(function() {
  $(this).siblings(".mycustom_dropd").slideToggle();
});
$('body').click(function(event) {
  $(".mycustom_dropd").slideUp();
  event.preventDefault();
  event.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mydropd">
  <a href="#" class="mydropd_a">menu
          <span class="line1"></span>
          <span class="line2"></span>
          <span class="line3"></span>
        </a>
  <ul class="mycustom_dropd">
    <li>
      <a href="#"><img src="images/vibgyor.png"> VIBGYOR</a>
    </li>
    <li><a href="#">MULTIPLAYER</a></li>
    <li><a href="#">RAPTOP</a></li>
    <li><a href="#">HELP</a></li>
    <li><a href="#">PROFILE</a></li>
  </ul>

I feel that the portion where you are clicking, the `body` wouldn't be having that height. So just try giving `height:100vh` and `width:100vh` to `body` and then try clicking.. Your code works with that.. or else try attaching it to `document` instead of `body` but that might lead to some other issues. — Guruprasad J Rao, Feb 05 '18 at 07:26
when you say it did not work what actually happening? not closing the menu? re-opening the menu? please the result in details also make the your code runnable so we can reproduce your issue. — dsharew, Feb 05 '18 at 07:26
Please wrap your javascript/jquery code in JQuery ready function. https://api.jquery.com/ready/ — estin sunny koothoor, Feb 05 '18 at 07:30
Check here https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Mina paulis, Feb 05 '18 at 07:35
It works when I made a snippet, so you need to wrap in a load event handler or put the code after the HTML — mplungjan, Feb 05 '18 at 07:40

score 2 · Accepted Answer · edited Feb 05 '18 at 07:59

Wrap code in jQuery ready function.

<script type="text/javascript">
    $(function() {
        $(".mydropd > a").click(function(){
            $(this).siblings(".mycustom_dropd").slideToggle();
             event.preventDefault();
             event.stopPropagation();
        });
        $('body').click(function(event){
            $(".mycustom_dropd").slideUp();

        });
    });
</script>


<div class="mydropd">
<a href="#" class="mydropd_a">Click Here
    <span class="line1"></span>
    <span class="line2"></span>
    <span class="line3"></span>
 </a>
<ul class="mycustom_dropd">
    <li><a href="#"><img src="images/vibgyor.png"> VIBGYOR</a></li>
    <li><a href="#">MULTIPLAYER</a></li>
    <li><a href="#">RAPTOP</a></li>
    <li><a href="#">HELP</a></li>
    <li><a href="#">PROFILE</a></li>
 </ul>
</div>

Need to close dropdown click on click of body

1 Answers1