当我单击一个切换按钮时，所有 JQuery 个 SlideToggle 都打开了

Question

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？

Answer 1

您需要执行上下文查找才能找到与其他元素相关的幻灯片。请参阅下面片段中的评论。

$(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() {});
    });
});

Answer 2

您也可以试试：

$(document).ready(function(){     
    $(document).on('click','.slidx',function(){
        $(this).next().slideToggle( 'slow', function() {});
    });
});

Answer 3

首先你必须去最近的 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>

当我单击一个切换按钮时，所有 JQuery 个 SlideToggle 都打开了

All of JQuery SlideToggle are opening when I clicked one toggle

javascript

jquery

html

slidetoggle