497 Мы уверены, что данное руководство по созданию переключения видимости контента совершенно точно вам пригодится, потому что его можно быстро и легко реализовать, используя всего лишь jQuery библиотеку.
Этот скрипт использует UL списки и позволяет пользователю переключать видимость контента LI элементов. Такая полезная особенность UI может помочь верстальщикам, потому как им не надо будет строить лишнего HTML и CSS кода и пользователям, смогут просматривать контент только тогда, когда захотят его увидеть.
1. HTML
Создаем UL список, остальное и так понятно.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ul id="toggle-view"> <li> <h3>Title 1</h3> <span>+</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </li> <li> <h3>Title 2</h3> <span>+</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </li> <li> <h3>Title 3</h3> <span>+</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </li> </ul> |
2. CSS
Мы использовали минимум CSS кода для этого руководства. Самый важный момент в том, чтобы спрятать элемент P.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
#toggle-view { list-style:none; font-family:arial; font-size:11px; margin:0; padding:0; width:300px; } #toggle-view li { margin:10px; border-bottom:1px solid #ccc; position:relative; cursor:pointer; } #toggle-view h3 { margin:0; font-size:14px; } #toggle-view span { position:absolute; right:5px; top:0; color:#ccc; font-size:13px; } #toggle-view p { margin:5px 0; display:none; } |
3. Javascript
Это один из самых коротких jQuery кодов!
Назначаем событие нажатия на элемент LI, и теперь, если пользователь кликнет на элемент LI, P станет видимым или наоборот свернется. Кроме того, код будет менять элемент SPAN с минуса на плюс и наоборот, в зависимости от видимости элемента P.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function () { $('#toggle-view li').click(function () { var text = $(this).children('p'); if (text.is(':hidden')) { text.slideDown('200'); $(this).children('span').html('-'); } else { text.slideUp('200'); $(this).children('span').html('+'); } }); }); |
Надеемся это руководство было вам полезно! :)
