当我单击一个切换时,所有的JQuery SlideToggle都将打开

时间:2018-09-12 14:21:09

标签: javascript jquery html slidetoggle

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字段:http://jsfiddle.net/d2tcmqpo/2/

所以我有两个幻灯片切换按钮,请检查js小提琴,这样您就可以看到,我想发生的事情是:如果我单击第一个切换按钮,它将打开,但是问题是当我单击第一个切换按钮时,第二个切换按钮也打开。

我知道我可以通过在每个切换中使用不同的类名来解决此问题。但是我不想那样,为什么?因为如果我要进行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),但它也不起作用。

有什么办法解决这个问题?还是我别无选择,只能在每个切换中使用不同的类?

3 个答案:

答案 0 :(得分:2)

您也可以尝试:

validates :user_id, presence: true, uniqueness: { scope: :contact_form_id }

答案 1 :(得分: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() {});
    });
});

答案 2 :(得分:1)

首先,您去最接近的父类并找到您的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>