Добавление обработчика событий jQuery для расширения div при нажатии на ссылку - PullRequest
Новая
       17

Добавление обработчика событий jQuery для расширения div при нажатии на ссылку

0 голосов
/ 12 мая 2010

Я использую немного jQuery для расширения / скрытия некоторых div. Мне нужно добавить обработчик событий, чтобы при нажатии на ссылку открывался соответствующий div. Каждому переключенному элементу div будет присвоен уникальный класс. Я ищу несколько советов о том, как создать обработчик событий.

JQuery 

$(document).ready(function(){

$(".toggle_container:not(:first)").hide(); 
$(".toggle_container:first").show();
$("h6.trigger:first").addClass("active");

$("h6.trigger").click(function(){
  $(this).toggleClass("active");
  $(this).next(".toggle_container").slideToggle(300);
});

CSS: 

// uses a background image with an on (+) and off (-) state stacked on top of each other 
h6.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;} 
h6.trigger a {color: #fff;text-decoration: none; display: block;} 
h6.active {background-position: left bottom;} 
.toggle_container { overflow: hidden; } 
.toggle_container .block {padding: 20px;}

HTML содержит список ссылок, таких как: 

<a href="#">One</a>
<a href="#">Two</a>

и соответствующие соответствующие div для открытия: 

<h6 class="trigger">Container one</h6> 
<div class="toggle_container">
div one
</div>

<h6 class="trigger">Container two</h6> 
<div class="toggle_container Open">
div one
</div>

Как я уже говорил, я буду назначать уникальный класс для облегчения этого.

Любой совет? Спасибо!

  • Чтобы уточнить, я ищу несколько советов по созданию обработчика событий, чтобы переключаться на открытие определенного div, когда по ссылке щелкают из другой части страницы, например, из навигации.

Ответы [ 2 ]

1 голос
/ 12 мая 2010

Я бы выложил ваши элементы так: (предпочитая использовать идентификатор вместо уникального класса) 

<a class="toggler" href="#div1">Click</div>
<a class="toggler" href="#div2">Click</div>
<div class="toggle-container" id="div1">
 Hello
</div>
<div class="toggle-container" id="div2">
 Hello
</div>

Тогда JS будет: 

$('div.toggle-container').hide().first().show().addClass('active');
$('a.toggler').bind('click', function (e) {
   var href = $(this).attr('href');
   $('div.active').hide().removeClass('active');
   $(href.slice(href.indexOf("#"))).show().addClass('active');

   event.preventDefault();
});

Если вы определенно хотите использовать уникальный класс, измените селектор следующим образом: 

$("." + href.slice(href.indexOf("#") + 1)).show().addClass('active');
1 голос
/ 12 мая 2010

Вы можете вызвать событие click для определенного заголовка, например: 

<h6 class="trigger" id="myHeader">Container two</h6> 
<div class="toggle_container Open">
div one
</div>


$('#myHeader').click();

Это скроет контейнер, если он уже открыт; чтобы предотвратить это, измените его на 

$('#myHeader:not(.active)').click();

(Если заголовок уже .active, селектор не будет соответствовать ни одному элементу и ничего не произойдет)

...