Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » По клику на ссылку скрыть все элементы кроме первого

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


     12.01.2012    jquery    Все вопросы » jQuery    5006

вопрос
Подскажите каким образом реализовать следующее:
Есть например 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
Юзер

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

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

ПафНутиЙ
Админ

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

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

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

pleak
Юзер

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

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

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

ПафНутиЙ
Админ

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

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

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

pleak
Юзер

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

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

ПафНутиЙ
Админ

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

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

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

pleak
Юзер

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

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

pleak
Юзер

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

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

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

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

 19.06.2014 tullius  jQuery
наверх