Проблемы со скольжением div 'cookie policy' в поле зрения

Question

Я пытаюсь создать простую область «слайд-ап» (например, для текста политики cookie), которая вызывается нажатием на ссылку.Но в моем коде есть 2 проблемы:

1) Текст на дисплее содержит гиперссылку (для нового окна), но когда я возвращаюсь к исходному окну, слайд закрывается (он все еще должен быть открыт.

2) Кнопка «Закрыть» не работает.

Мой код: CSS:

#cookieNote {
  position: absolute;
  width: 100%;
  height: 5em;
  bottom: 0;
  overflow: hidden;
  background-color: #000; color: #FFF;
  text-align:center;
  transition: all 2s;
}

#cookieNote.closed {
  bottom: -5em;
  height: 0;
}

HTML:

<button class="trigger">
  Open it
</button>
<div id="cookieNote" class="closed">Leave it<br/>
new line with link <a href="http://google.com" target="_blank">google </a><br/>
with close button 
<button class="trigger">
  Close it
</button>
</div>

Javescript:

$('.trigger, #cookieNote').click(function() {
  $('#cookieNote').toggleClass('closed');
}); 

Answer 1

Второй .trigger - это ребенок #cookieNote.

При нажатии кнопки закрытия функция запускается дважды, поэтому она открывается и закрывается слишком быстро, чтобы что-либо заметить. удаление класса trigger из второй кнопки решило бы проблему, если вы хотите сохранить все #cookieNote в качестве триггера.

Именно поэтому гиперссылка закрывает уведомление о cookie. Они содержат гиперссылку #cookieNote, которая запускает функцию.

Изменить:

Использование .not() - это простой способ решения проблемы. http://api.jquery.com/not/

$('.trigger, #cookieNote').not('#cookieNote .trigger').click(function() {
  $('#cookieNote').toggleClass('closed');
});