1

Имеется скрипт:

$(".item").each(function() {
    var a = $(this).find("a");
    var text = $(this).find(".dnone");
    var preview = $(this).find(".preview");
    $(a).click(function() {
        $(preview).toggleClass("dnone");
        $(text).toggleClass("dnone");
        return false;
    });
});

И имеется список из 10 элементов .item. Как сделать так, чтобы при нажатии одного из var a остальные все скрывались (как в аккордеоне)?

1 ответ 1

1

Если предположить, что под размытой фразой "остальные все скрывались" на самом деле имеется в виду "добавить класс dnone всем другим text и убрать класс dnone у всех других preview", то в рамках текущего кода это можно сделать так:

$(document).ready(function() {
    var $items = $('.item');
    var $previews = $items.find('.preview');
    var $texts = $items.find('.dnone');
    $items.each(function() {
        var $this = $(this);
        var $a = $this.find("a");
        var $text = $this.find(".dnone");
        var $preview = $this.find(".preview");
        $a.on("click", function() {
            $previews.not($preview).removeClass("dnone");
            $texts.not($text).addClass("dnone");
            $preview.toggleClass("dnone");
            $text.toggleClass("dnone");
            return false;
        });
    });
});
.item {
    margin: 15px;
}
.dnone {
    display: none;
}
<div class="item">
    <a href="">link1</a>
    <div class="preview">preview1</div>
    <div class="dnone">text1</div>
</div>
<div class="item">
    <a href="">link2</a>
    <div class="preview">preview2</div>
    <div class="dnone">text2</div>
</div>
<div class="item">
    <a href="">link3</a>
    <div class="preview">preview3</div>
    <div class="dnone">text3</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

В вопросе отсутствуют HTML и CSS, но схематичный пример таков.

Использование класса dnone для выборки text не является логичным, поэтому имеет смысл всем text добавить класс text и выбирать их по этому классу, оставив классу dnone лишь функцию скрытия элементов.

Также имеет смысл добавить всем a какой-то класс (например, link), чтобы делать выборку по классу, а не по тегу - это является более гибким решением.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.