我正在尝试在我正在创建的小导航菜单中对div重复显示/隐藏命令。我可以让所有四个按钮上的show / hide工作一次,但如果我点击三次相同的按钮,我就无法重复它。它只是添加活动类,但不会再次隐藏剩余的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();
});
});
答案 0 :(得分:2)
所以我只更改了on(“click”,function(){...})处理程序,因此我不是使用show / hide而是使用切换。通过这样做,我不必拥有activeclass的click处理程序。我怀疑这可能是问题的一部分。
var mobileSquare = $(".mobile-square");
mobileSquare.on("click", function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).toggle();
});
/* General Rules */
/* <link href="https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu" rel="stylesheet">
font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Quicksand', sans-serif;
*/
@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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/670a0bbb85.js"></script>
<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>
答案 1 :(得分:0)
最好使用切换而不是显示/隐藏。看看这是否指向正确的方向。
`https://jsfiddle.net/c3md14jf/1/`