javascript - jQuery如何实现微软官方网站效果？

Question

http://www.microsoft.com/zh-cn/default.aspx?region=cn

微软官方网站的导航是点击下面整个都弹出，这个只要 toggle() 就能实现。
问题一，他如何实现点击空白处 hide() 所有导航弹出来的下拉菜单的？
问题二，点击其他导航 如何隐藏其他已经弹出来的下来菜单的？

Answer 1

先看下导航的结构

下拉的展开是通过给li添加class selected控制的，这个楼主打开调试工具，实验下就看出来了。
这个很好实现

var $navbar = $('#d8d78b10-f2c8-466e-b6d7-786c135527c6');
$navbar.on('click', 'li', function (e) {
    $navbar.find('li.selected').removeClass('selected');//隐藏已经出现的下拉
    e.stopPropagation(); //阻止冒泡
    $(this).toggleClass('selected');//切换class
});

那个一大撮的是ul的ID，之所以阻止冒泡是为了避免点击本身关闭下拉

然后来实现点击空白处，隐藏下拉

var $navbar = $('#d8d78b10-f2c8-466e-b6d7-786c135527c6');
$navbar.on('click', 'li', function (e) {
    $navbar.find('li.selected').removeClass('selected');//隐藏已经出现的下拉
    e.stopPropagation(); //阻止冒泡
    $(this).toggleClass('selected');//切换class
});

$(document).on('click', function () {
    $navbar.find('li.selected').removeClass('selected');//隐藏已经出现的下拉
});

这里我只是给出个大概的思想，也有别的实现方法。具体的得去看源码了！希望对你有所帮助

Answer 2

http://jsfiddle.net/v6j72ybt/1/

Answer 3

1. 可以监听document的点击事件，然后判断currentTarget是否在下拉菜单内
2. 点击任意导航都先隐藏当前弹出的下拉，然后如果不是当前这个，则下拉开新的

Answer 4

这种具有排他性(同一时刻最多只能有一个处于active的状态)的东西，最好用类的方式，或者将处于active的那个存储在一个全局的变量里，在任何一个下拉出来之前先检查是否有active的下拉，有则先隐藏，再将当前的下拉，然后替换当前元素为active全局变量。建议下拉菜单用类来实现：该类的实例有个状态变量，状态变量一旦改变，则改变当前实例的显隐状态，同时更新后面说到的那个值，该类有个属性，用来存储处于active状态的实例。

类的实现可参考以下（coffeescript）

coffeescriptclass dropdown
    @active_instance: undefined
    constructor: ($element, $trigger, options)->
        @$element = $element
        @$trigger = $trigger
        @active_status = if options? and options.active then options.active else false
        @bindEvents()
    changeStatus: (to)->
        @active_status = to
        @showhide()
    showhide: ->
        if @active_status
            @show()
        else
            @hide()
    show: ->
        if @constructor.active_instance?
            @constructor.active_instance.hide()
        @$element.show()
        @constructor.active_instance = @
    hide: ->
        @$element.hide()
        @constructor.active_instance = undefined   
    bindEvents: ->
        @$trigger.on 'click', (event)=>
            event.stopPropagation()
            @changeStatus(not @active_status)         
        @$element.on 'click', (event)=>
            event.stopPropagation()
            @changeStatus(false)
        $(document).on 'click', (event)=>
            event.stopPropagation()
            @changeStatus(false)

使用方法, $list是下拉列表，$trigger是触发下拉显隐的那个toggler

var dropdown1 = new dropdown($list, $trigger)

Answer 5

https://github.com/codrops/Blueprint-HorizontalDropDownMenu
我在github上找到了这个帮我解决了问题，也希望对别热你有帮助