drop down menu on click

Question

My drop down is messing up. Can somebody help. I can't make the drop down menu hide when clicking other element (menu). Also the hover of the main menu does not stays while the drop down menu is shown.

$('.menus >li').on('click', '> a' ,function() {
    $(this).siblings('.main-subs').show();      
}).on('click', function(){  
    $(this).siblings('.main-subs').hide();      
});

for demo see here

Maybe it helps (duplicate?): http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — chimos, Nov 26 '15 at 08:55

score 1 · Answer 1 · answered Nov 26 '15 at 07:42

Hide all other submenus with class name main-subs on mouse over

$('.menus >li').on('click', '> a' ,function() {
  $('.main-subs').hide();   
  $(this).siblings('.main-subs').show();    
})

$('.menus >li').on('mouseover', '> a' ,function() {
  $('.main-subs').hide();   
})

Fiddle : http://jsfiddle.net/tintucraju/c5ebqaje/1/

score 1 · Answer 2 · answered Nov 26 '15 at 07:45

1

Full CSS approach. No need to click to show the menu and hide it. Just add this to your CSS:

.menus li:hover a ~ ul {
    display: block;
}

See it working here: http://jsfiddle.net/0smo76be/3/

answered Nov 26 '15 at 07:45

sailens

1,594
1
17
34

score 0 · Answer 3 · answered Nov 26 '15 at 07:43

$('.menus >li').on('click', '> a' ,function() {
        $('.main-subs').hide();
        $(this).siblings('.main-subs').show();  
    }).on('click', function(){  
        $(this).siblings('.main-subs').hide();      
    });

$(document).click(function(event) { 
    if(!$(event.target).closest('.menus >li > a').length) {
        if($('.menus >li > a').is(":visible")) {
            $('.main-subs').hide();
        }
    }        
})

Fiddle

madalinivascu · Answer 4 · 2015-11-26T07:59:11.940

0

Simple:

.menus .activ { background: green; }

js:

$('.menus >li').on('click', '> a' ,function() {
        //resets
         $('.menus li a').removeClass('activ');
         $('.main-subs').hide();
         //toggle the green
        $(this).addClass('activ');
        //show the menu
        $(this).siblings('.main-subs').show();  
    });

http://jsfiddle.net/u1jt500x/

edited Nov 26 '15 at 07:59

answered Nov 26 '15 at 07:53

madalinivascu

32,064
4
39
55

score 0 · Answer 5 · answered Nov 26 '15 at 08:20

I think the simplest solution is adding a new rule to your CSS

.menus .main-subs.active { display: block;}

And modify your function to:

$('.menus >li').on('click',function() {
    $("a", this).siblings('.main-subs').toggleClass("active");
    $(this).siblings().children(".main-subs").removeClass("active");
});

$('.menus >li').on('click',function() {
 $("a", this).siblings('.main-subs').toggleClass("active");
    $(this).siblings().children(".main-subs").removeClass("active");
});

.menus { display: table; width: 70%; height: 76px; }
.menus li { position: relative; display: table-cell; height: 48px; padding: 0; text-transform: uppercase; font-size: 17px; font-family: 'Myriad Pro'; text-align: center; }
.menus li:hover {background:green;}
.menus li.order a { color: #ffffff; }
.menus li.order .main-subs { display: none; }
.menus li a { width: 100%; height: 48px; padding-top: 28px; display: block; color: #b1bbbe; }
.menus li a:hover { color: #fff; }
.menus li:hover { background: green; }
.menus li.current { background: #0383E7; }
.menus li.current a { color: #fff; }
.menus .main-subs { display: none; position: absolute; width: 100%; left: -40px; top: 76px; z-index: 999; }


.menus .main-subs.active { display: block;}


.menus .main-subs li { display: block; height: 51px; padding: 0; border-bottom: 1px solid #0383e7; text-align: left; text-transform: uppercase; background: #0870d3; font: normal 12px 'Malgun Gothic'; }
.menus .main-subs li a { display: block; height: 31px; padding-left: 12px; padding-top: 20px; color: #fff; }
.menus .main-subs li:hover { background: #0866c5; }
.menus .main-subs li:last-child { border-bottom: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menus">
  <li>
   <a href="#">Main Menu</a>      
   <ul class="main-subs">
    <li><a href="#">Sub Menu 1</a></li>       
    <li><a href="#">Sub Menu 1</a></li>
   </ul>      
  </li>
  <li>
   <a href="#">Main Menu2</a>
   <ul class="main-subs">
    <li class="withsub"><a href="#">Sub Menu 2</a>
    </li>       
    <li class="withsub"><a href="#">Sub Menu 2</a>
    </li>
    <li><a href="#">Sub Menu 2</a></li>
   </ul>      
  </li>
  <li>
   <a href="#">Main Menu3</a>      
   <ul class="main-subs">
    <li><a href="#">Main Menu3</a></li>       
    <li><a href="#">Main Menu3</a></li>
    <li><a href="#">Main Menu3</a></li>
   </ul>      
  </li>
  
 </ul>

drop down menu on click

5 Answers5