0
<li class="dropdown-grid open">
  <a class="dropdown-toggle" id="ddaccount" aria-expanded="false">
    <i class="fa fa-lock"></i>&nbsp;<span class="hidden-sm hidden-md hidden-lg">User Account</span><span class="caret"></span>
  </a>
  <div role="menu" class="dropdown-grid-wrapper">
    <ul class="dropdown-menu col-xs-12 col-sm-10 col-md-8 col-lg-7">
      <li>
        <div data-ride-class="carousel slide" id="carousel-example-account">
          <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8">
              <div class="carousel-inner">
                <div class="item active">
                  <h3 class="text-right"><i class="fa fa-lock"></i>&nbsp;Login</h3><br>

                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</li>

In above code i have one ul element that when i click on button it needs to add open class to li element and that is working fine...but problem is that i want one more function in jQuery that when user click inside that open div that it does not close....but only to close that div if user click outside that div...

working that when i click on button that add class open:

$("li").on("click","a.dropdown-toggle",function(e){
    $('li.dropdown-grid').toggleClass("open");
    e.stopPropagation();
  });

NOT WORKING...when user click inside that open div it needs NOT to close...and when user click outside that open div it needs to close that div (remove class open)

$(document).on("click", function(e) {
    if ($(e.currentTarget).is("a.dropdown-toggle") === false) {
      $('li.dropdown-grid').removeClass("open");
      console.log("close menu clicked outside ul...");
    }
  });

i don't know why it closes inside open div (outside div click close and that is fine) but it close also if i click inside that div and i need to not to close when i click inside that div...where i do wrong in above code?

Pedram
  • 15,766
  • 10
  • 44
  • 73
John
  • 1,521
  • 3
  • 15
  • 31
  • 1
    Fiddle or snippet to reproduce the problem... –  Dec 09 '17 at 11:20
  • Ok thanks i will do now – John Dec 09 '17 at 11:22
  • Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) – agrm Dec 09 '17 at 11:25
  • I know that is duplicate but class and div names and html organisartion is different..i read that post but i could not find solution...i updated more clean above code..becasue meganavbar needs more js scripts and css that i can't incluide in jsfiddle – John Dec 09 '17 at 11:27
  • @John so either it is a duplicate and you should be able to use the answer, or it is not since your issue is different so it is not useful. –  Dec 12 '17 at 09:38

1 Answers1

0

I added this and now is working..it is not elegant and clean way (length === 0) but if works if someone knows more elegant way please post...this works for me...

$(document).on("click", function(e) {
    if ($(e.target).closest('li.dropdown-grid').length === 0) {
      $('li.dropdown-grid').removeClass("open");
    }
  });
John
  • 1,521
  • 3
  • 15
  • 31