javascript - 切换 Jquery 不起作用

Question

我有一个关于 jquery toggle 的问题，它不切换当前 div，而是切换当前 div 的下一个 div，当我尝试更改 toggle div 的类时，它根本不起作用。任何人都可以帮我吗？
P.S:我正在切换 SITES block ，我将它的内容(背景:黄色)包装在 class="clsDashRegion_sitesBloc"中，当我把这个类放在我的 JS 中时它不起作用。

这是我的代码

(function zipContentBloc($) {
		$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() {
			// Toggle the panel next to the item that was clicked
			$(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
		});
	})(jQuery);

/* Plus and Minus Signs */
.clsDashRegion_zipIndicator {
	position: absolute;
	top: 6%;
    right: 0.5rem;
	transform: translateY(-50%);
	font-size: 1.8rem;
}

/* Plus */
.clsDashRegion_zipIndicator::after {
	content: '\002B';
}

/* Minus */
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after {
	content: '\002D';
	font-size: 3rem;
}

.clsDashRegion_levelOne {
	width: 25rem;
	/* height: 100%; */
	background: #3c4647;
	position: relative;
}
.clsDashRegion_catgBloc {
	position: relative;
    left: 2%;
	width: calc(100% - 1rem);
	height: 12.6rem;
}
.clsDashRegion_catgBlocBackground {
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
    opacity: 0.6;
}
.clsDashRegion_catgHeaderBloc {
	height: 2.5rem;
	background: aqua;
}
.clsDashRegion_catgLogoBloc {
	width: 2.5rem;
	height: 2.5rem;
	float: left;
}
.clsDashRegion_catgTitleBloc {
	float: left;
	width: calc(100% - 5.5rem);
	height: 2.5rem;
	color: #000000;
	font-weight: bold;
	font-size: 1.4rem;
	text-align: center;
	line-height: 2.5rem;
}
.clsDashRegion_catgReduceBloc {
	float: right;
	width: 3rem;
	height: 2.5rem;
	text-align: center;
	line-height: 2.5rem;
}
.clsDashRegion_catgTNTFMBloc {
	/* position: absolute; */
	/*float: none;*/
	display: block;
    float: right;
	width: 10rem;
	height: 2.5rem;
}
.clsDashRegion_catgTitleTNTFM {
	float: left;
	width: 5rem;
	height: 2.5rem;
	color: #000000;
	text-align: center;
    font-weight: bold;
}
.clsDashRegion_catgInfoBloc {
	position: relative;
	float: right;
	display: block;
    width: 100%;
	height: 2.5rem;
}
.clsDashRegion_infoTitleBloc {
	float: left;
	width: 50%;
    height: 2.5rem;
	font-weight: bold;
	margin-left: 1rem;
}
.clsDashRegion_infoValueBloc {
	float: right;
	width: 5rem;
	height: 2.5rem;
	text-align: center;
}
.clsDashRegion_wrapbuttonBlocTicket {
	position: relative;
    float: left;
    display: block;
    width: 100%;
	height: 4rem;
}
.clsDashRegion_wrapbuttonBlocGE {
	position: relative;
    float: left;
    display: block;
    width: 100%;
	height: 5rem;
}
.clsDashRegion_catgbuttonBloc {
	position: relative;
	float: left;
    top: 1rem;
    text-align: center;
}
.clsDashRegion_buttonValue {
	width: 5rem;
    height: 1.5rem;
	margin-left: 2rem;
    border: 1px solid;
    line-height: 1.4rem;
    background: chartreuse;
	border-style: groove;
}
.clsDashRegion_buttonTitle {
	margin-left: 1.5rem;
    line-height: 1.4rem;
	font-weight: bold;
}
.clsDashRegion_catgInfoBlocSite {
	position: relative;
	float: right;
	display: block;
    width: 100%;
	top: 0.5rem;
	text-align: center;
	font-weight: bold;
}
.clsDashRegion_valueTech {
	float: left;
	width: calc(100% - 4rem);
	margin-bottom: 0.5rem;
	border-style: groove;
    letter-spacing: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsSubPageArea">
		<div class="clsDashRegion_levelOne">
			<div class="clsDashRegion_catgBloc">
				<div class="clsDashRegion_catgBlocBackground">
					<div class="clsDashRegion_catgHeaderBloc">
						<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div>
						<div class="clsDashRegion_catgTitleBloc">ALARMES</div>
						<div class="clsDashRegion_catgReduceBloc">
							<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
							<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
						</div>
					</div>
					<div class="clsDashRegion_catgTNTFMBloc">
						<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
						<div class="clsDashRegion_catgTitleTNTFM">FM</div>
					</div>
					<div class="clsDashRegion_catgInfoBloc">
						<div class="clsDashRegion_infoTitleBloc">Critique</div>
						<div class="clsDashRegion_infoValueBloc">V1</div>
						<div class="clsDashRegion_infoValueBloc">V2</div>
					</div>
				</div>
			</div>
			
			<div class="clsDashRegion_catgBloc" style="height:8em;">
				<div class="clsDashRegion_catgBlocBackground">
					<div class="clsDashRegion_catgHeaderBloc">
						<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div>
						<div class="clsDashRegion_catgTitleBloc">TICKETS</div>
						<div class="clsDashRegion_catgReduceBloc">
							<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
							<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
						</div>
					</div>
					<div class="clsDashRegion_wrapbuttonBlocTicket">
						<div class="clsDashRegion_catgbuttonBloc">
							<div class="clsDashRegion_buttonValue">V1</div>
							<div class="clsDashRegion_buttonTitle">En cours</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="clsDashRegion_catgBloc" style="height:20rem;">
				<div class="clsDashRegion_catgBlocBackground">
					<div class="clsDashRegion_catgHeaderBloc">
						<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div>
						<div class="clsDashRegion_catgTitleBloc">SITES</div>
						<div class="clsDashRegion_zipIndicator"></div>
					</div>
					<div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;">
						<div class="clsDashRegion_catgTNTFMBloc">
							<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
							<div class="clsDashRegion_catgTitleTNTFM">FM</div>
						</div>
						<div class="clsDashRegion_catgInfoBloc">
							<div class="clsDashRegion_infoTitleBloc">-3dB</div>
							<div class="clsDashRegion_infoValueBloc">V1</div>
							<div class="clsDashRegion_infoValueBloc">V2</div>
						</div>
						<div class="clsDashRegion_catgInfoBloc">
							<div class="clsDashRegion_infoTitleBloc">Rx</div>
							<div class="clsDashRegion_infoValueBloc">V1</div>
							<div class="clsDashRegion_infoValueBloc">V2</div>
						</div>
						<div class="clsDashRegion_catgInfoBloc">
							<div class="clsDashRegion_infoTitleBloc">Perte HF</div>
							<div class="clsDashRegion_infoValueBloc">V1</div>
							<div class="clsDashRegion_infoValueBloc">V2</div>
						</div>
						<div class="clsDashRegion_catgInfoBloc">
							<div class="clsDashRegion_infoTitleBloc">Décrochage HS</div>
							<div class="clsDashRegion_infoValueBloc">V1</div>
							<div class="clsDashRegion_infoValueBloc">V2</div>
						</div>
						<div class="clsDashRegion_wrapbuttonBlocGE">
							<div class="clsDashRegion_catgInfoBlocSite">GE Actif</div>
							<div class="clsDashRegion_catgbuttonBloc">
								<div class="clsDashRegion_buttonValue">V1</div>
								<div class="clsDashRegion_buttonTitle">En cours</div>
							</div>
							<div class="clsDashRegion_catgbuttonBloc">
								<div class="clsDashRegion_buttonValue">V2</div>
								<div class="clsDashRegion_buttonTitle">- 10 jrs</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="clsDashRegion_catgBloc" style="height:18rem;">
				<div class="clsDashRegion_catgBlocBackground">
					<div class="clsDashRegion_catgHeaderBloc">
						<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div>
						<div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div>
						<div class="clsDashRegion_catgReduceBloc">
							<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
							<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
						</div>
					</div>
					<div class="clsDashRegion_catgbuttonBloc">
						<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div>
						<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	

Answer 1

发生这种情况是因为您将额外的选择器与 on('click', '.clsDashRegion_catgBloc',...

试试这个:

    $('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) {
        // Toggle the panel next to the item that was clicked
        $( event.target ).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
    });

$(this) = $('.clsDashRegion_levelOne'); - 你添加的 block .on();

$( event.target ) =$('.clsDashRegion_catgBloc'); - 恰好被点击的 block

fiddle 示例:https://jsfiddle.net/z4tdxmbk/检查this还有