當其他下拉菜單處於活動/打開狀態時，自動隱藏/關閉下拉菜單

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