@corona-net

Как задать toggle элементу при клике?

Доброго дня.
Есть 2 элемента, по клику на них открывается невидимая область. Вопрос: как прописать, что по клику на каждый элемент, открывалась только его область, а не двух сразу. Пока неизвестно сколько будет элементов и задавать каждому в отдельности id и прописывать клик-кажется глупо.
<div class="container-example">
    <div class="box1">
        <div class="string1">1секция</div>
        <div class="string2"></div>
    </div>
    <div class="box12">
        <div class="string1">2секция</div>
        <div class="string2"></div>
    </div>
</div>

.container-example {
    width: 300px;
    height: 300px;
    border: 5px solid green;
    margin-bottom: 500px;
}
.string1 {
    cursor: pointer;
}
.string2 {
    width: 100%;
    height: 100px;
    background-color: aquamarine;
    display: none;
}

$( document ).ready(function() {
        $(".string1").click(function () {
            $(".string2").toggle();
        });
    });


Вот пример: u0763918test1.isp.regruhosting.ru зелёный квадрат сверху, 2 строки= 1секция, 2 секция.
  • Вопрос задан
  • 114 просмотров
Решения вопроса 4
sniggering_deus
@sniggering_deus Куратор тега JavaScript
I will live forever in the flame of your eyes.
Можно сделать и без Jquery, например вот так:

Ответ написан
v3shin
@v3shin
Веб-шаман
Можно, например, задать боксам класс box и модифицировать скрипт:
$(".string1").click(function () {
    $(this).closest(".box").find(".string2").toggle();
});
Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
Или например так
$(".string1").click(function () {
    $(this).next(".string2").toggle();
});

Общая идея в том, чтобы использовать this, тоесть тот таргет, на котором произошло событие, в дальше через обертки или потомков найти нужный элемент. В jquery очень много таких штук типа parent, parents, next, closest, find
Ответ написан
@agutin
Добрый день.

Зависит от задачи, на сколько нужно универсально.

Можно так
$(document).ready(function() {
  $(`.string1`).on('click', function(){
    $(this).next('.string2').toggle();
  });
});


Либо если в контейнере будет только боксы, то так
$(document).ready(function() {
  $('.container-example').children().on('click', function(){
    $(this).find('.string2').toggle();
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы