切换Jquery不起作用

时间：2017-07-25 09:42:01

标签： javascript jquery toggle

我遇到了jquery切换的问题，它没有切换当前div，而是切换当前div的下一个div，当我尝试更改切换div的类时，它根本不起作用。有人可以帮我吗？
PS：我正在切换SITES块，我将它的内容（背景：黄色）包装在类=＆＃34; clsDashRegion_sitesBloc＆＃34;中，当我把这个类放在我的JS中它不起作用

这是我的代码

＆＃13;
＆＃13; 
(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);
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：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）= $（＆＃39; .clsDashRegion_levelOne＆＃39;）; - 您添加.on();

的块

$（event.target）= $（＆＃39; .clsDashRegion_catgBloc＆＃39;）; - 完全点击的块

小提琴示例：https://jsfiddle.net/z4tdxmbk/ 再次检查this

相关问题
最新问题