首次单击后无法在菜单项上重复显示/隐藏

Question

我正在尝试在我正在创建的小导航菜单中对 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();
    });
});

Answer 1

所以我只更改了 on("click", function(){...}) 处理程序，因此我使用的是切换，而不是使用显示/隐藏。通过这样做，我不必拥有活动类的单击处理程序。我怀疑这可能是问题的一部分。

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>

Answer 2

最好使用切换而不是显示/隐藏。看看这是否为您指明了正确的方向。

`https://jsfiddle.net/c3md14jf/1/`