Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) jQuery По клику на ссылку скрыть все элементы кроме первого

По клику на ссылку скрыть все элементы кроме первого


     12.01.2012    jQuery    3125

вопрос
Подскажите каким образом реализовать следующее:
Есть например 4 абзаца каждый из которых заключен в тег <li>. Мне нужно чтобы по нажатию например на ссылку либо кнопку отображался только один абзац заключенный в <li>.

Вот наглядный пример.

До нажатия "Скрыть":
<li>Первый абзац</li>
<li>Второй абзац</li>
<li>Третий абзац</li>
<li>Четвертый абзац</li>

<a>Скрыть</a>


После нажатия скрыть:
<li>Первый абзац</li>

<a>Развернуть</a>

Ответил: ПафНутиЙ


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>123</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){  
        targetLi = $(".class").not(":first");
        $(".link").click(function(){
            if($(this).hasClass("show")) {
                $(this).removeClass("show");
                targetLi.fadeOut(200);
            } else {
                $(this).addClass("show");
                 targetLi.fadeIn(400);
            }    
        });
        });
    </script>
</head>

<body>
<ul>
    <li class="class">1111</li>
    <li class="class">1222</li>
    <li class="class">333</li>
    <li class="class">4444</li>
    <li class="class">5555</li>
</ul>  
<a href="#" class="link show">показать/скрыть</a>
</body>
</html>
Отредактировал 13-01-2012, 03:23 - ПафНутиЙ
Причина: Поправил ответ

Комментарии пользователей (8)

pleak
14 | 15

pleak - 13 января 2012 02:56 - Юзер

Что-то не работает ваш пример.
ПафНутиЙ, вы проверяли код? Может есть еще вариант? И как быть со сменой имени ссылки?

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 13 января 2012 03:24 - Админ

Поправил ответ. Скрипт писал до этого навскидку, лень было расписывать)))

Каков вопрос - таков и ответ. Просто помните об этом.

pleak
14 | 15

pleak - 13 января 2012 02:59 - Юзер

Отлично! Все работает. Еще раз спасибо.
Интересует еще каким образом привязать к этому делу куку. Пример нашел, но применить не получается.

var targetLi=new Date();
  targetLi.setDate(1+targetLi.getDate());
  document.cookie="targetLi=done; path=/; expires="+ targetLi.toGMTString();

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 13 января 2012 09:22 - Админ

Используйте плагин coocies для jquery - с ним оч просто работать и мануалов хватает.

Каков вопрос - таков и ответ. Просто помните об этом.

pleak
14 | 15

pleak - 13 января 2012 18:22 - Юзер

А обойтись без плагина не как?

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 13 января 2012 19:15 - Админ

Можно, но я обычно плагин юзаю.
Хотя по чисо js кукам тоже много манов.

Каков вопрос - таков и ответ. Просто помните об этом.

pleak
14 | 15

pleak - 13 января 2012 22:59 - Юзер

Так может поможете с js куками?

pleak
14 | 15

pleak - 16 января 2012 13:34 - Юзер

Почему игнорируем?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 19.06.2014 tullius  jQuery