点击下拉菜单

Question

我的下拉菜单出问题了，有人能帮忙吗？我无法让下拉菜单在点击其他元素（菜单）时隐藏。而且主菜单的悬停在显示下拉菜单时也不会保持。

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

演示见这里。

- Jenie

---

也许这可以帮助（重复？）：https://dev59.com/SnM_5IYBdhLWcg3wXyDZ - chimos

Answer 1

在鼠标悬停时隐藏所有其他类名为main-subs的子菜单。

$('.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/

（Fiddle是一个在线代码编辑器和调试工具，这里提供了一个链接）

- Tintu C Raju

Answer 2

完整的CSS方法。不需要点击来显示和隐藏菜单。只需将以下内容添加到您的CSS中：

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

在这里查看它的工作原理: http://jsfiddle.net/0smo76be/3/

- sailens

Answer 3

$('.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

{{链接1：Fiddle}}

- VishwaKumar

Answer 4

简单：

.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/

- madalinivascu

Answer 5

我认为最简单的解决方案是在你的 CSS 中添加一个新规则。

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

并修改您的函数为：

$('.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>

- Adrian Menendez