Hide/close 当其他下拉列表为 active/open 时自动下拉

Question

在 my site 之上，我有 2 links 'Account' 和语言选择器。单击 'Language selector' 后，下拉菜单打开。但是，当我单击 'Account' link 时，我希望语言选择器下拉列表为 hide/close?

'Account' link 是默认的 Magento 1.9 jQuery 功能
我用 this plugin

提前致谢。

更新问题：

更明确和具体。我想要的是：如果我在 'Account link' <a class="top-account skip-link skip-account skip-active"> <span class="label">Account</span> </a> 之外单击，我希望下拉到 hide/close.

在这里我找到了 Skip links 的 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();
});

更新问题：

太棒了。但是，当您同时单击 links 'Account' 和 'Language'-links 时，两个下拉菜单都会打开？我想要一种切换？如果你点击另一个close/hides..？我如何实现这一目标？语言选择器中的 jQuery 代码来自‘Polyglot’语言切换器 2’。参见上面的link。

谢谢。

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();
});

Hide/close 当其他下拉列表为 active/open 时自动下拉

Hide/close drop down automatically when other drop down is active/open

jquery

magento

toggle

show-hide