Question

在my site之上我有2个链接＆＃39;帐户＆＃39;和语言选择器。点击语言选择器＆＃39;后，下拉列表会打开。但是，当我点击“帐户”时，链接我想要语言选择器下拉隐藏/关闭？

＆＃39;帐户＆＃39; link是默认的Magento 1.9 jQuery功能
我使用this plugin

提前致谢。

更新问题：

更清晰，更具体。我想要的是：如果我在“帐户”链接之外点击“＃39; <a class="top-account skip-link skip-account skip-active"> <span class="label">Account</span> </a>我希望下拉隐藏/关闭。

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

更新问题：

很棒的工作。但是，当您点击两个链接时，“帐户”会被点击。和＆＃39;语言链接，两个下拉开放？我想要一种切换？如果你点击其中一个关闭/隐藏..？我如何实现这一目标？语言选择器的jQuery代码来自'Polyglot'语言切换器2＆＃39;。请参阅上面的链接。

感谢。

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

我认为缺少两个重要的观点。如果你点击它，你实际上不想关闭skip-content。所以你必须在这个区域阻止来自$ 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();
});

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

2 个答案: