Форум

VitalikPro · #1 (**permalink**) 02.10.2012, 12:28

Имею структуру

<div class="post">
    <div class="but">Открыть 1</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="but">Открыть 2</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="but">Открыть 3</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="butClose butAll">Закрыть все</div>
</div>
<div calss="post">
...
</div>
<div calss="post">
...
</div>
<div calss="post">
...
</div>

ВОПРОС: Как свернуть все textPost при нажатии кнопки "Закрыть все", и что бы все but стали видны (ну или те которые не видны - не суть).
Вопрос в том как обратиться ко всем textPost и but.

Хочу обратить внимание. Кнопка "Закрыть все" имеет класс butClose который имеет кнопки "Закрыть" закрывающие отдельные блоки.
Блоков post может быть сколь угодно много, нужно работать с конкретным, в котором butAll

Margarita · #2 (**permalink**) 02.10.2012, 13:18

что бы все but стали видны
$(".but").show();
свернуть все textPost
$(".textPos").hide(); //ну или slideUp.... это уж ваше желание

VitalikPro · #3 (**permalink**) 02.10.2012, 15:15

Ой я забыл сказать, на одно страницы post может быть много. А нужно свернуть тот в котором находиться butAll.
У меня именно в этом проблема, то есть нужно найти родителя, и выбрать внутри родителя все textPost.
Поправил первое сообщение.

ksa · #4 (**permalink**) 02.10.2012, 15:26

Сообщение от VitalikPro

на одно страницы post может быть много. А нужно свернуть тот в котором находиться butAll

Как вариант...

$('.butAll').click(function (){
   $(this).parents('.post').find('.textPost').hide();
});

ksa · #5 (**permalink**) 02.10.2012, 15:31

Сообщение от VitalikPro

на одно страницы post может быть много. А нужно свернуть тот в котором находиться butAll.
У меня именно в этом проблема, то есть нужно найти родителя, и выбрать внутри родителя все textPost.

Оно?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.post {
	border: 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.butAll').click(function (){
	   $(this).parents('.post').find('.textPost').hide();
	});
});
</script>
</head>
<body>
<div class="post">
    <div class="but">Открыть 1</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="but">Открыть 2</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="but">Открыть 3</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="butClose butAll">Закрыть все</div>
</div>
<div class="post">
    <div class="but">Открыть 1</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="but">Открыть 2</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="but">Открыть 3</div>
    <div class="textPost">
        Какой то текст
        <div class="butClose">Закрыть</div>
    </div>
    <div class="butClose butAll">Закрыть все</div>
</div>
</body>
</html>

P.S.
Не ленитесь делать тестовые примеры. Ибо другим это приходится делать за вас...

VitalikPro · #6 (**permalink**) 02.10.2012, 15:47

Спасибо. Именно такой вариант по логике мне и пришел в голову. Но мне кажется я пробовал такой вариант. И у меня не работал(пол ночи разные варианты перебирал). Но вижу, что работает. Может у меня, что то в проекте ещё мешает. Посмотрю.

Это мое 7 сообщение на форуме, не знал, что тут можно делать тестовые примеры. Теперь обязательно буду. С ними и самому удобнее.

Margarita · #7 (**permalink**) 02.10.2012, 21:38

есть еще такая хорошая вещь как closest()
она ищет ближайший указанный родительский элемент
например:
.closest("li") - найдет ближайший родительский элемент списка

Форум

Справочник

Discord чат

Курсы javascript