jQuery, чтобы скрыть и показать div с индикатором - PullRequest
Новая
       4

jQuery, чтобы скрыть и показать div с индикатором

3 голосов
/ 28 декабря 2010

Используя jQuery ниже, чтобы переключать скрытие и отображение div-ов текста: как бы я добавил какой-нибудь индикатор - например, стрелки вверх и вниз в виде графики - к заголовкам, когда div открыты или закрыты? Какой лучший способ сделать это? Два изображения? CSS спрайт? И самое главное: как это будет интегрировано в JS?

Я посмотрел другой jQuery, который назначает случайное число каждому div, а затем определяет, какие открыты, а какие закрыты, и переключает одно из двух изображений. Но я использую php в цикле WordPress для показа сообщений, и это создает проблемы с увеличением в цикле, поэтому должен быть более простой способ, который не требует изменений в названии заголовка div. Спасибо ....

Этот JS запускает показ и сокрытие. Каждый div можно развернуть и свернуть независимо. 

$(document).ready(function() {
  $('div.demo-show:eq(0)> div').hide();  
  $('div.demo-show:eq(0)> h3').click(function() {
    $(this).next().slideToggle('fast');
  });
});

Это HTML-код, с которым он работает: 

<div class="collapser">

<p class="title">Header-1 </p>
<div class="contents">Lorem ipsum</div>

<p class="title">Header-2</p>
<div class="contents">Lorem ipsum </div>

<p class="title">Header-3</p>
<div class="contents">Lorem ipsum</div>

</div>

CSS произвольный: 

.collapser {
margin: 0;
padding: 0;
width: 500px;
}

.title {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}

.contents {
padding: 5px 10px;
background-color:#fafafa;
}

1 Ответ

5 голосов
/ 28 декабря 2010

Вы можете использовать метод toggleClass, чтобы установить класс в обработчике кликов. или вверх или вниз. Каждый класс будет иметь соответствующий набор фоновых изображений.

В вашем обработчике кликов 

$('.collapser').toggleClass('up down');

и ваш HTML будет выглядеть так 

<div class="collapser up">
</div>
...