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

Question

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

• “帐户”链接是 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”语言切换器 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();
});