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

Question

在我的网站顶部，我有两个链接"帐户"one_answers"语言"选择器。单击"语言选择器"后，会打开下拉列表。但是当我点击"帐户"链接时，我想隐藏/关闭语言选择器下拉列表？

• "帐户"链接是默认的Magento 1.9 jQuery功能
• 我用这个插件构建的语言选择器

提前感谢。

更新问题：

更加明确和具体。我想要的是：如果我在"帐户链接"<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();
});

更新问题：

很好，这很管用。但是当你同时点击"账户"one_answers"语言"链接时，两个下拉列表都会打开？我想要一个开关？如果单击其中一个，则关闭/隐藏。。？我该如何做到这一点？Language选择器中的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个重要点。如果你点击它，你实际上不想关闭跳过的内容。所以你必须防止点击事件在这个区域$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();
});