16 апреля 2011 в 10:07
Всем привет, подскажите пожалуйста, каким образом можно добавлять определенный класс при нажатии на ссылку с помощью jQuery?
На данный момент у меня следующая ситуация - использую маленький скрипт jQuery для того чтобы при нажатии на ссылку разворачивался тексе.
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
Вот, что в коде нужно дописать чтобы при нажатии на <a href="#" class="heading">Button</a>, добавлялся класс .active, а после того как я еще раз нажму на эту ссылку (чтобы свернуть текст) → класс .active исчезает.
Комментарии
jQuery(".content").hide();
jQuery(".heading").click(function()
{
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
} else {
jQuery(this).addClass('active');
}
jQuery(this).next(".content").slideToggle(500);
return false;
});
});
Или так:
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
jQuery(this).toggleClass('active');
return false;
});
});
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
jQuery(this).toggleClass('active');
return false;
});
});
Спасибо, работает. Но теперь при нажатии на саму ссылку - текст не раскрывается...
у текста класс не меняли? С .content на какой-нить другой. Попробуйте вместо
jQuery(this).next(".content").slideToggle(500);
вот так:
jQuery(this).find(".content").slideToggle(500);
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(this).toggleClass('active').find(".content").slideToggle(500);
return false;
});
});
Вот сокращенный вариант)) чето сразу не подумал))
Если вешаете свой обработчик на ссылку, игнорируя обработку браузером - функция должна вернуть false. Это так,на заметку
У текста класс не менял)
стоп. только увидел, что контент идет не внутри ссылки..
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(this).toggleClass('active').parent('div').find('.content').slideToggle(500);
return false;
});
});
Это на случай если где-то внутри поменялась разметка. Пробуйте.
Тоже самое, нажимаю на ссылку для того чтобы равзернулся текст, а в итоге к ссылке добавляется класс .active, но текст не равзорвачивается.
есть линк на страницу?
http://halturka.kz