Not able to manipulate jQuery on particular situation in onclick event

Question

I have a situation where when I click on milestones link it unhide a dropdown div with milestones as a heading.

My requirement is when I click inside that div anywhere it should not get hide. it should get hide when I click outside that div only. Current problem is when I click inside that div it get hide. Here is the link to the image just for reference. https://drive.google.com/file/d/0B0zHBJb86qsIUFpWMm1ra3dfc1k/view

$("#headermile").on({//task list in header
  focus:function(){
      $('#mileheader').attr("class", "");
  }, 
  blur:function(){    

    $('#mileheader').click(function (e) {
      if (e.target.id == 'mileheader') {
        $("#mileheader").attr("class","");
      } else {
        $("#mileheader").attr("class","hide");
      }

  });

<li class="has-dropdown">
  <a id="headermile" href="#">Milestones </a>
  <div id="mileheader" class="hide">
    <ul class="dropdown settings">
    </ul>
  </div>
</li>

if possible add full page with css code . so i can create fiddle base on than and provide you example — Nishit Maheta, Mar 21 '15 at 06:06
https://drive.google.com/file/d/0B0zHBJb86qsIUFpWMm1ra3dfc1k/view — vishnuk, Mar 21 '15 at 06:27
"... $('#mileheader').click(function (e) { if (e.target.id == 'mileheader') { ...". Do you see how the function triggers only on clicking #mileheader? So how could e.target.id ever be anything other than 'mileheader'. Then you remove the class? Logic is bad here. And there are plenty of other problems with the code. — Troy Thompson, Mar 21 '15 at 06:27
you could see the image there . i am not able to do in jsfiddle. not working there — vishnuk, Mar 21 '15 at 06:27
@TroyThompson yes i thought so. but i am not getting the logic. i am new to jquery — vishnuk, Mar 21 '15 at 06:28
For working with classes in jQuery, try .addClass and .removeClass instead of .attr - or even try .toggleClass — Troy Thompson, Mar 21 '15 at 06:32
Don't include PHP in example markup unless your question relates to PHP — Troy Thompson, Mar 21 '15 at 06:33

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

Don't think this answer is perfect, just wanted to find a quick solution.

http://jsfiddle.net/troythompson/eLz7ptwf/

jQuery(document).ready(function($) {

    $('#headermile').click(function(event) {
        event.preventDefault();
        $("#mileheader").removeClass("hide");
    });

    $(document).on('click', function(event) {
        var container = $("#mileheader");
        var button = $("#headermile");
        if (!container.is(event.target) && container.has(event.target).length === 0 && !button.is(event.target)) {
            $("#mileheader").addClass("hide");
        }
    });
});

Resource: Use jQuery to hide a DIV when the user clicks outside of it

Again, I don't use .attr to try to remove a single class, as it will remove all classes on that element.

edited May 23 '17 at 11:56

Community

1
1

answered Mar 21 '15 at 07:01

Troy Thompson

371
1
6

there onclick event is not removing the hide Class. – vishnuk Mar 21 '15 at 07:17
Oh you meant if you want to hide the list after you have made it visible, by clicking the link? – Troy Thompson Mar 21 '15 at 07:32
i meant after making it unhide. when i click on that unhidden div it should remain visible unless i click outside that div. – vishnuk Mar 21 '15 at 07:35
Tell me about your problem – Troy Thompson Mar 21 '15 at 08:06
on click it do not get unhide. do not remove hide class – vishnuk Mar 21 '15 at 08:14
what is it? have any idea ? – vishnuk Mar 21 '15 at 08:53

Not able to manipulate jQuery on particular situation in onclick event

1 Answers1