当我单击一个切换按钮时,所有 JQuery 个 SlideToggle 都打开了
All of JQuery SlideToggle are opening when I clicked one toggle
HTML
//FIRST TOGGLE
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
//SECOND TOGGLE
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
JS
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(".mfields").slideToggle( 'slow', function() {});
});
});
这是 JS FIDDLE : http://jsfiddle.net/d2tcmqpo/2/
所以我有两个滑动开关请检查 js fiddle 所以你可以看到,我想要发生的是如果我点击第一个开关然后它会打开,但问题是当我点击第一个切换第二个切换也打开。
我知道我可以通过每次切换使用不同的 class 名称来解决这个问题。但我不想那样,为什么?因为如果我有 100 个开关,那么我将不得不像这样编写 100 倍的当前 JQUERY 代码。
$(document).on('click','.slidx_1',function(){
$(".mfields_1").slideToggle( 'slow', function() {});
});
$(document).on('click','.slidx_2',function(){
$(".mfields_2").slideToggle( 'slow', function() {});
});
$(document).on('click','.slidx_3',function(){
$(".mfields_3").slideToggle( 'slow', function() {});
});
等等。
我在想也许我应该使用 jquery $(this)
但它也不起作用。
有什么办法可以解决吗?或者我别无选择,只能每次切换使用不同的 class?
您需要执行上下文查找才能找到与其他元素相关的幻灯片。请参阅下面片段中的评论。
$(document).ready(function(){
$(document).on('click','.slidx',function(){
//this selects all the mfields on the page, not just the one you want to slide.
$(".mfields").slideToggle( 'slow', function() {});
});
});
$(document).ready(function(){
$(document).on('click','.slidx',function(){
//this version will find the parent dropdown-cus of the slidx and mfields,
//and then find the mfields inside it, and only that one
$(this).closest('.dropdown-cus').find(".mfields").slideToggle( 'slow', function() {});
});
});
您也可以试试:
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(this).next().slideToggle( 'slow', function() {});
});
});
首先你必须去最近的 parent class 并找到你的 mfields
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(this).closest('.dropdown-cus').find(".mfields").slideToggle( 'slow', function() {});
});
});
.dropdown-cus{
width: 300px;
height: auto;
background-color: #e4e4e4;
cursor: pointer;
padding: 5px 20px;
position: relative;
}
.dropdown-cus i{
right: 0;
position: absolute;
margin-right: 10px;
margin-top: 5px;
}
.dropdown-cus input{
width: 100%;
margin-bottom: 25px;
}
.h-label hr{
margin-top: 5px;
}
.hidden{
display: none;
}
.dropdown-cus span {
width: 100%;
padding: 6px 0px;
transition: .5s;
display: inline-block;
}
.h-label label {
font-size: 12px;
font-style: italic;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
HTML
//FIRST TOGGLE
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
//SECOND TOGGLE
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
JS
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(".mfields").slideToggle( 'slow', function() {});
});
});
这是 JS FIDDLE : http://jsfiddle.net/d2tcmqpo/2/
所以我有两个滑动开关请检查 js fiddle 所以你可以看到,我想要发生的是如果我点击第一个开关然后它会打开,但问题是当我点击第一个切换第二个切换也打开。
我知道我可以通过每次切换使用不同的 class 名称来解决这个问题。但我不想那样,为什么?因为如果我有 100 个开关,那么我将不得不像这样编写 100 倍的当前 JQUERY 代码。
$(document).on('click','.slidx_1',function(){
$(".mfields_1").slideToggle( 'slow', function() {});
});
$(document).on('click','.slidx_2',function(){
$(".mfields_2").slideToggle( 'slow', function() {});
});
$(document).on('click','.slidx_3',function(){
$(".mfields_3").slideToggle( 'slow', function() {});
});
等等。
我在想也许我应该使用 jquery $(this)
但它也不起作用。
有什么办法可以解决吗?或者我别无选择,只能每次切换使用不同的 class?
您需要执行上下文查找才能找到与其他元素相关的幻灯片。请参阅下面片段中的评论。
$(document).ready(function(){
$(document).on('click','.slidx',function(){
//this selects all the mfields on the page, not just the one you want to slide.
$(".mfields").slideToggle( 'slow', function() {});
});
});
$(document).ready(function(){
$(document).on('click','.slidx',function(){
//this version will find the parent dropdown-cus of the slidx and mfields,
//and then find the mfields inside it, and only that one
$(this).closest('.dropdown-cus').find(".mfields").slideToggle( 'slow', function() {});
});
});
您也可以试试:
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(this).next().slideToggle( 'slow', function() {});
});
});
首先你必须去最近的 parent class 并找到你的 mfields
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(this).closest('.dropdown-cus').find(".mfields").slideToggle( 'slow', function() {});
});
});
.dropdown-cus{
width: 300px;
height: auto;
background-color: #e4e4e4;
cursor: pointer;
padding: 5px 20px;
position: relative;
}
.dropdown-cus i{
right: 0;
position: absolute;
margin-right: 10px;
margin-top: 5px;
}
.dropdown-cus input{
width: 100%;
margin-bottom: 25px;
}
.h-label hr{
margin-top: 5px;
}
.hidden{
display: none;
}
.dropdown-cus span {
width: 100%;
padding: 6px 0px;
transition: .5s;
display: inline-block;
}
.h-label label {
font-size: 12px;
font-style: italic;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>