0
我正在尝试在我创建的小导航菜单中的div上重复显示/隐藏命令。我可以在所有四个按钮上使显示/隐藏功能运行一次，但如果我点击同一个按钮三次，我就无法重复它。它只是添加活动类，但不会再隐藏剩余的div。我希望点击和取消点击div的操作每次都要永远工作。第一次点击后无法在菜单项上重复显示/隐藏
JS小提琴这里：https://jsfiddle.net/c3md14jf/
HTML：
<div class="mobile-container">
<div class="mobile-row">
<a href="#fa">
<div class="mobile-square">
<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
<p>
Foreign Affairs
</p>
</div>
</a>
<a href="#travel">
<div class="mobile-square">
<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
<p>
Travel
</p>
</div>
</a>
</div>
</div>
<div class="mobile-container">
<div class="mobile-row">
<a href="#dev">
<div class="mobile-square">
<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
<p>
Development
</p>
</div>
</a>
<a href="#misc">
<div class="mobile-square">
<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
<p>
Fitness
</p>
</div>
</a>
</div>
</div>
CSS：
@import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');
body {
color: #008fc5;
background-color: #fff;
}
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
margin: 0;
}
i {
padding-top: 10px;
padding-bottom: 5px;
}
.mobile-container a {
text-decoration: none;
}
.mobile-row {
width: 100%;
margin-top: 5px;
}
.mobile-square {
width: 49%;
height: auto;
min-height: 95px;
color: #fff;
background-color: #008fc5;
text-align:center;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
position:relative;
}
.mobile-square p {
font-family: 'Montserrat', sans-serif;
}
.active {
background-color: #004762;
}
JS：
var mobileSquare = $(".mobile-square");
mobileSquare.click(function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).hide();
activeSquare.click(function(){
mobileSquare.not(activeSquare).show();
});
});