Чистый CSS аккордеон остановить прокрутку страницы привязки - PullRequest
Новая
       22

Чистый CSS аккордеон остановить прокрутку страницы привязки

1 голос
/ 04 августа 2020

У меня чистый CSS аккордеон, он отлично работает, но проблема заключается в обработке щелчка, перемещающего экран вверх до тега привязки; 

<div class="collapse-content">
    <div class="collapse" id="instagram">
        <a class="instagram" href="#instagram" onClick="return false;"><i class="fab fa-instagram"></i>Insta</a>
        <div class="content">
        <div class="inner-content">
            Insta content
        </div>
        </div>
    </div>
    <div class="collapse" id="twitter">
        <a class="twitter" href="#twitter"><i class="fab fa-twitter"></i>Twitter</a>
        <div class="content">
        <div class="inner-content">
            Twitter content
        </div>
        </div>
    </div>
    <div class="collapse" id="dribbble">
        <a class="dribbble" href="#dribbble"><i class="fab fa-dribbble"></i>Dribble</a>
        <div class="content">
        <div class="inner-content">
            Dribble content
        </div>
        </div>
    </div>
</div>

Как я могу подавить прокрутку браузера до привязки верх экрана? Я пробовал добавить? ! и 0 до конца привязки, но это нарушает работу ссылки, и, как вы можете видеть выше, я пробовал onClick = "return false;" который останавливает щелчок. Я предполагаю, что мне нужно какое-то смещение, так как я не хочу подавлять событие щелчка, а также просто прокрутку.

@ в тот момент, когда я избегаю использования Jquery, в идеале нет JS, но стараюсь сделать это как можно проще.

1 Ответ

0 голосов
/ 04 августа 2020

Если это не ссылки, вам не следует использовать теги <a>. Ссылки могут:

  • ссылка на другой документ
  • ссылка на другую часть того же документа

В этом случае щелчок запускает действие, вы должны используйте тег <button type="button">.

...