如何使用javascript在两个菜单项之间切换?

Question

我有 2 个菜单项"英语"和"西班牙语"目前显示在我的网站上。

我希望在页面加载时显示"西班牙语"菜单项，并隐藏"英语"菜单项。

选择"西班牙语"菜单项时，我希望显示"英语"菜单项并隐藏"西班牙语"菜单项。如您所见，我正在寻找两个菜单项的切换解决方案。我不想使用下拉菜单。

我的优势不是if-else陈述，我希望有人能帮助解决问题。我在考虑按 id 获取菜单项？

以下是 2 个菜单 ID：

menu-item-4002和menu-item-4003

$(document).ready(function () {
var $LangEs = $("#menu-item-4002");
var $LangEn = $("#menu-item-4003").hide();
$("#menu-item-4002").click(function (e) {
e.preventDefault();
$LangEn.hide();
var target = $(this).data('target');
if(target){
$LangEn.filter(target).show();
}
});
});

Answer 1

您可以使用.is(':hidden')检查元素是否隐藏，并显示隐藏的按钮，并隐藏可见的按钮：

$(document).ready(function() {
var $LangEs = $("#menu-item-4002");
var $LangEn = $("#menu-item-4003").hide();
[$LangEs, $LangEn].forEach(function(el) {
el.click(function(e) {
e.preventDefault();
if($LangEn.is(':hidden')) {
$LangEs.hide();
$LangEn.show();
} else {
$LangEn.hide();
$LangEs.show();
}
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-item-4002">ES</button>
<button id="menu-item-4003">EN</button>