当其他下拉菜单处于活动/打开状态时，自动隐藏/关闭下拉菜单

Question

在my site的顶端，我有2个链接的“帐户”和语言选择器。点击'语言选择器'后，下拉菜单打开。但是当我点击'账户'链接时，我希望语言选择器下拉菜单隐藏/关闭？

• 的 '帐户' 链接是默认Magento的1.9 jQuery的功能
• 语言选择我建有提前this plugin

感谢。

更新问题：

更明确和具体。正是我想要的是：如果我点击'帐户链接'<a class="top-account skip-link skip-account skip-active"> <span class="label">Account</span> </a>以外我想下拉隐藏/关闭。

在这里，我找到了跳过链接的Magento的Javascript代码：

// ============================================= 
// Skip Links 
// ============================================= 

var skipContents = $j('.skip-content'); 
var skipLinks = $j('.skip-link'); 

skipLinks.on('click', function (e) { 
    e.preventDefault(); 

    var self = $j(this); 
    // Use the data-target-element attribute, if it exists. Fall back to href. 
    var target = self.attr('data-target-element') ? self.attr('data-target-element') : self.attr('href'); 

    // Get target element 
    var elem = $j(target); 

    // Check if stub is open 
    var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0; 

    // Hide all stubs 
    skipLinks.removeClass('skip-active'); 
    skipContents.removeClass('skip-active'); 

    // Toggle stubs 
    if (isSkipContentOpen) { 
     self.removeClass('skip-active'); 
    } else { 
     self.addClass('skip-active'); 
     elem.addClass('skip-active'); 
    } 
}); 

$j('#header-cart').on('click', '.skip-link-close', function(e) { 
    var parent = $j(this).parents('.skip-content'); 
    var link = parent.siblings('.skip-link'); 

    parent.removeClass('skip-active'); 
    link.removeClass('skip-active'); 

    e.preventDefault(); 
}); 

更新问题：

大这就是工作。但是当你点击两个链接'帐户'和'语言'链接，这两个下拉菜单打开？我想要一种切换？如果你点击其他关闭/隐藏..？我如何实现这一目标？语言选择器中的jQuery代码来自'Polyglot'Language Switcher 2'。请参阅上面的链接。

谢谢。

Answer 1

与

var skipContents = $j('.skip-content'); 
var skipLinks = $j('.skip-link'); 

$j('body').click(function() { 
    skipLinks.removeClass('skip-active'); 
    skipContents.removeClass('skip-active'); 
}); 

skipLinks.on('click', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    var self = $j(this); 
    // Use the data-target-element attribute, if it exists. Fall back to href. 
    var target = self.attr('data-target-element') ? self.attr('data-target-element') : self.attr('href'); 

    // Get target element 
    var elem = $j(target); 

    // Check if stub is open 
    var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0; 

    // Hide all stubs 
    skipLinks.removeClass('skip-active'); 
    skipContents.removeClass('skip-active'); 

    // Toggle stubs 
    if (isSkipContentOpen) { 
     self.removeClass('skip-active'); 
    } else { 
     self.addClass('skip-active'); 
     elem.addClass('skip-active'); 
    } 
}); 

$j('#header-cart').on('click', '.skip-link-close', function(e) { 
    e.stopPropagation(); 

    var parent = $j(this).parents('.skip-content'); 
    var link = parent.siblings('.skip-link'); 

    parent.removeClass('skip-active'); 
    link.removeClass('skip-active'); 

    e.preventDefault(); 
}); 

Answer 2

替换当前的代码，我觉得一个2个inportant点丢失。如果你点击它，你实际上不想关闭跳过内容。所以你必须防止在这个区域从$ j（'body'）的点击事件。 此外，您需要IOS/Android的此功能。

var skipContents = $j('.skip-content'); 
var skipLinks = $j('.skip-link'); 

// close active link and content by clicking body 
$j('body').on('click touchstart',function() { 
    skipLinks.removeClass('skip-active'); 
    skipContents.removeClass('skip-active'); 
}); 

skipContents.on('click touchstart',function(e) { 
    e.stopPropagation(); 
}); 

skipLinks.on('click touchstart', function (e) { 
    e.preventDefault(); 

    // stop closing active link and content by clicking body 
    e.stopPropagation(); 

    var self = $j(this); 
    // Use the data-target-element attribute, if it exists. Fall back to href. 
    var target = self.attr('data-target-element') ? self.attr('data-target-element') : self.attr('href'); 

    // Get target element 
    var elem = $j(target); 

    // Check if stub is open 
    var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0; 

    // Hide all stubs 
    skipLinks.removeClass('skip-active'); 
    skipContents.removeClass('skip-active'); 

    // Toggle stubs 
    if (isSkipContentOpen) { 
     self.removeClass('skip-active'); 
    } else { 
     self.addClass('skip-active'); 
     elem.addClass('skip-active'); 
    } 
}); 
$j('#header-cart').on('click', '.skip-link-close', function(e) { 
    e.stopPropagation(); 

    var parent = $j(this).parents('.skip-content'); 
    var link = parent.siblings('.skip-link'); 

    parent.removeClass('skip-active'); 
    link.removeClass('skip-active'); 

    e.preventDefault(); 
});