Все JQuery SlideToggle открываются, когда я нажимаю один переключатель - PullRequest
Новая
       6

Все JQuery SlideToggle открываются, когда я нажимаю один переключатель

0 голосов
/ 12 сентября 2018

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, чтобы вы могли видеть, что я хочу, чтобы это произошло, если я нажму первый тумблер, то он откроется, но проблема в том, что когда я нажимаю первый тумблер, второй тумблер также открывается.

Я знаю, что могу решить эту проблему, используя разные имена классов для каждого переключателя. Но я не хочу так, почему? потому что, если у меня будет 100 переключателей, мне придется кодировать 100x моего текущего кода 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 голосов
/ 12 сентября 2018

Вы также можете попробовать: 

$(document).ready(function(){     
    $(document).on('click','.slidx',function(){
        $(this).next().slideToggle( 'slow', function() {});
    });
});
0 голосов
/ 12 сентября 2018

Сначала вы должны пойти в ближайший родительский класс и найти свои поля m *

1002 *
 $(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>
0 голосов
/ 12 сентября 2018

Вам нужно выполнить контекстный поиск, чтобы найти слайд, связанный с другим элементом. См комментарии в фрагментах ниже. 

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