你好,我可能遗漏了一些非常明显的东西。
我正在尝试制作一个 toggleClass 以将 ul 的 li 从英语切换为西类牙语。
基本上只希望在我单击西类牙语文本/按钮时显示西类牙语 ul,并在我单击英语文本/按钮时显示英语 ul。
这是 jsfiddle https://jsfiddle.net/TonyTheOnly/k92ayp24/
非常感谢任何帮助!
$(document).ready(function(){
$(".burger-nav").on("click", function(){
$("nav ul").toggleClass("open");
});
});
$(document).ready(function () {
$(".spanish").on("click", function () {
$("englishNav").toggleClass("spanishNav");
});
$(".english").on("click", function () {
$("spanishNav").toggleClass("englishNav");
});
});
.spanishNav {
display:none;
}
.spanish{
cursor:pointer;
}
.english{
cursor:pointer;
}
nav {
float: right;
padding-right: 10%
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 35px;
padding-top: 25px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
}
.burger-nav{
display: block;
height: 40px;
width: 40px;
float: right;
background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
background-size: cover;
cursor: pointer;
}
.wrapper {
width: 100%;
padding: 0;
}
nav ul {
overflow: hidden;
background: white;
height:0;
}
nav ul.open {
height: auto;
margin-top:150px;
margin-right: 100px;
}
nav ul li{
float:none;
text-align: left;
width: 100%;
margin: 0;
}
nav ul li a {
color: black;
padding: 10px;
border-bottom: 1px solid #404040;
display: block;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav>
<a class="burger-nav"></a>
<ul class="englishNav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="spanishNav">
<li><a href="#">Homeo</a></li>
<li><a href="#">Abouto</a></li>
<li><a href="#">Serviceso</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p class="spanish">
spanish
</p>
<p class="english">
english
</p>
</nav>
</div>
最佳答案
看起来您使用的 toggleClass
不正确。 toggleClass
用于添加/删除类。为了达到您想要的效果,我们只需要根据选择的语言隐藏/显示 .spanishNav
或 .englishNav
元素。
一种解决方案是根据选择的按钮显示/隐藏西类牙语/英语导航元素。像这样:
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("nav ul").toggleClass("open");
});
$(".spanish").on("click", function() {
$(".englishNav").hide();
$(".spanishNav").show();
});
$(".english").on("click", function() {
$(".englishNav").show();
$(".spanishNav").hide();
});
});
.spanishNav {
display: none;
}
.spanish {
cursor: pointer;
}
.english {
cursor: pointer;
}
nav {
float: right;
padding-right: 10%
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 35px;
padding-top: 25px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
}
.burger-nav {
display: block;
height: 40px;
width: 40px;
float: right;
background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png");
background-size: cover;
cursor: pointer;
}
.wrapper {
width: 100%;
padding: 0;
}
nav ul {
overflow: hidden;
background: white;
height: 0;
}
nav ul.open {
height: auto;
margin-top: 150px;
margin-right: 100px;
}
nav ul li {
float: none;
text-align: left;
width: 100%;
margin: 0;
}
nav ul li a {
color: black;
padding: 10px;
border-bottom: 1px solid #404040;
display: block;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav>
<a class="burger-nav"></a>
<ul class="englishNav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="spanishNav">
<li><a href="#">Homeo</a></li>
<li><a href="#">Abouto</a></li>
<li><a href="#">Serviceso</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p class="spanish">
spanish
</p>
<p class="english">
english
</p>
</nav>
</div>
关于jquery - 用于交换 ul li 的 toggleClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47108665/