VPF::Раскрывающийся список с + и - - Форум программистов

Cheizer

Дата 16.5.2014, 10:18 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Дорогие друзья, помогите разобраться с кодом JQUERY, взял из интернета, пытаюсь адаптировать под себя, дело в том что он заточен работать с одним списком UL и его элементами, но у меня в цикле выводятся эти UL в своих DIV, и получается ерунда, по нажатию на + блок разворачивается и мгновенно сворачивается, а последний вообще не раскрывается, подскажите пожалуйста, что подкрутить что бы каждый UL открывался и не влиял на соседние?

Код


    $(".ul-dropfree").find("li:has(ul)").prepend('<div class="drop"></div>');
    $(".ul-dropfree div.drop").click(function() {
        if ($(this).nextAll("ul").css('display')=='none') {
            $(this).nextAll("ul").slideDown(400);
            $(this).css({'background-position':"-11px 0"});
        } else {
            $(this).nextAll("ul").slideUp(400);
            $(this).css({'background-position':"0 0"});
        }
    });
    $(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});

Код


<ul class="ul-treefree ul-dropfree">
<li>
<div class="drop" style="background-position: 0px 0px;"></div>Подробнее:
<ul style="display: none;">
<li>
тут подробный текст который показывается по нажатию на +
</li>
</ul>
</li>
</ul>

Cheizer

Дата 16.5.2014, 11:51 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

РЕШЕНО! Простой список. при нажатии на плюс разворачиваем, становится минус, жмем на него, сворачиваем.

Код


<style>
/* ul-treefree */
ul.ul-treefree { padding-left:25px; }
ul.ul-treefree ul { margin:0; padding-left:6px; }
ul.ul-treefree li { position:relative; list-style:none outside none; border-left:solid 1px #999; margin:0; padding:0 0 0 19px; line-height:23px; }
ul.ul-treefree li:before { content:''; display:block; border-bottom:solid 1px #999; position:absolute; width:18px; height:11px; left:0; top:0; }
ul.ul-treefree li:last-child { border-left:0 none; }
ul.ul-treefree li:last-child:before { border-left:solid 1px #999; }

/* ul-dropfree */
ul.ul-dropfree div.drop {
width:11px;
height:11px;
position:absolute;
z-index:10;
top:6px;
left:-6px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPA
AAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}
</style>

Код


<script type="text/javascript">
    $(document).ready(function(){
        $("div.drop").click(function(){
        if ($(this).nextAll("ul").css('display')=='none') {
            $(this).nextAll("ul").slideDown(400);
            $(this).css({'background-position':"-11px 0"});
        } else {
            $(this).nextAll("ul").slideUp(400);
            $(this).css({'background-position':"0 0"});
        }
        });
    });
</script>

Код



<div style="border:1px #cc0000 solid; width:50%; margin:0 auto;">
    

<div style="background:#f1f1f1;">
<ul class="ul-treefree ul-dropfree">
<li>
<div class="drop" style="background-position: 0px 0px;"></div>Подробнее:
<ul style="display: none;">
<li>
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ
</li>
</ul>
</li>
</ul>
</div>

<div style="background:#f1f1f1;">
<ul class="ul-treefree ul-dropfree">
<li>
<div class="drop" style="background-position: 0px 0px;"></div>Подробнее:
<ul style="display: none;">
<li>
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ
</li>
</ul>
</li>
</ul>
</div>

<div style="background:#f1f1f1;">
<ul class="ul-treefree ul-dropfree">
<li>
<div class="drop" style="background-position: 0px 0px;"></div>Подробнее:
<ul style="display: none;">
<li>
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ<br />
ТЕКСТ ТЕКСТ ТЕКСТ
</li>
</ul>
</li>
</ul>
</ul>
</div>


</div>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »