Форум

lukasss · #1 (**permalink**) 07.12.2014, 20:54

Доброго дня. Подскажите как решить:

Есть код:

<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, прошу помощи от Вас ))

рони · #2 (**permalink**) 07.12.2014, 23:00

lukasss,
а может без скриптов ? или поиск ? вопрос чуть неежедневный

danik.js · #3 (**permalink**) 07.12.2014, 23:15

Сообщение от lukasss

$(event.target).attr('class') != 'help-link'

Не стоит так писать. Пиши так:

$(event.target).hasClass('help-link');

рони · #4 (**permalink**) 08.12.2014, 00:31

lukasss,
css

<!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>

Форум

Справочник

Discord чат

Курсы javascript