JQuery Показать / скрыть Div не работает в Chrome

Я новичок в JQuery. У меня есть a.acessaPonto, если я щелкаю по нему, добавляю / удаляю класс a.acessaPonto.Selected и показываю / скрываю div.AcessaPontoAtendimento. У меня есть такой код. Хорошо работает в Firefox и IE, но не работает в Chrome.

  $( document ).ready(function() {
 $('.acessaPonto').click(function() {
  $(this).toggleClass('Selected');
  if ($(this).hasClass('Selected'))
        $('.AcessaPontoAtendimento').css("display", "inline-block");
  else
  $('.AcessaPontoAtendimento').css('display', 'none');
    });
  });
.acessaPonto{
  background-color:blue;
}
.acessaPonto.Selected{
  background-color:red;
}

.AcessaPontoAtendimento{
  display:none;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
  <a href="#" class="acessaPonto">Click</a>
  <div class="AcessaPontoAtendimento">
    <p>Lorem ipsum dolor color</p>
  </div>
</body>
</html>

У кого-то есть идея, в чем проблема в моем коде?

2 ответа

Решение

Код работает нормально. Настоящая проблема в моем хроме. Я убиваю приложение и снова и снова открываю, код работает!

Но я настраиваю некоторые части, чтобы лучше работать со старым кодом в приложении.

$('.acessaPonto').click(function() {
    $(this).toggleClass('Selected');
    if ($(this).hasClass('Selected'))
    $('.AcessaPontoAtendimento').removeClass('hide'); // maybe you prefer .show();
    else
    $('.AcessaPontoAtendimento').addClass('hide'); // maybe you prefer .hide();
});

Tnx все для поддержки.

$('.acessaPonto').click(function (e) {
    e.preventDefault();
    $(this).toggleClass('Selected');
    $('.AcessaPontoAtendimento').toggle( $(this).hasClass('Selected') );
});

Если ваш .acessaPonto находится на a тег, вам нужно e.preventDefault()иначе нет.

Другие вопросы по тегам