Скрыть/показать блоки
Доброго дня. Подскажите как решить:
Есть код: <div class="wrapper-help"> <div class="help-link" title="Нажмите, чтобы получить дополнительную информацию">?</div> <div class="help-info">Некая раскрывающая информация об этом узле</div> </div> <div class="wrapper-help"> <div class="help-link" title="Нажмите, чтобы получить дополнительную информацию">?</div> <div class="help-info">Некая раскрывающая информация об этом узле</div> </div> <div class="wrapper-help"> <div class="help-link" title="Нажмите, чтобы получить дополнительную информацию">?</div> <div class="help-info">Некая раскрывающая информация об этом узле</div> </div> Требуется, при нажатии на .help-link показывать соответствующий .help-info. Вот что есть пока:
$('.help-link').click(function(event) {
$('.help-info').toggle();
});
$(document).click(function (event) {
if ($(event.target).closest('.help-info').length == 0 && $(event.target).attr('class') != 'help-link') {
$('.help-info').hide();
}
});
Открытое .help-info должно прятаться при нажатии вне его, и даже на другой .help-link Вот с этим запутался, пока получилось только открыть блок и закрыть при нажатии в другое место. Но когда нажимаю на другой .help-link, прежний .help-info остается открытым. Не особый знаток JQuery, прошу помощи от Вас )) |
lukasss,
а может без скриптов ? или поиск ? вопрос чуть неежедневный :cray: |
Цитата:
$(event.target).hasClass('help-link');
|
lukasss,
css :victory:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.help-info {
display: none;
}
.help-link:focus + .help-info{
display: block;
}
.help-link:focus{
outline: none
}
</style>
</head>
<body>
<div class="wrapper-help">
<div tabindex="0" class="help-link" title="Нажмите, чтобы получить дополнительную информацию">?</div>
<div class="help-info">Некая раскрывающая информация об этом узле</div>
</div>
<div class="wrapper-help">
<div tabindex="1" class="help-link" title="Нажмите, чтобы получить дополнительную информацию">?</div>
<div class="help-info">Некая раскрывающая информация об этом узле</div>
</div>
<div class="wrapper-help">
<div tabindex="2" class="help-link" title="Нажмите, чтобы получить дополнительную информацию">?</div>
<div class="help-info">Некая раскрывающая информация об этом узле</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:32. |