Как предотвратить наложение ссылок с фиксированной позиции <ul>, что предотвращает их нажатие? - PullRequest
Новая
       2

Как предотвратить наложение ссылок с фиксированной позиции <ul>, что предотвращает их нажатие?

0 голосов
/ 21 января 2020

Я закодировал некоторые кнопки, которые отображаются в правом нижнем углу нашего веб-сайта на мобильном телефоне, и поместил их с элементом <ul>. Чтобы анимировать кнопки, я перевел каждый из элементов <li> сразу после выполнения кода на ось Y, чтобы они все выстроились в линию, и был виден только последний элемент. Тем не менее, я заметил, что, хотя он переведен, высота <ul> остается такой же, как была до запуска jQuery, и это предотвращает нажатие некоторых ссылок на веб-сайте. Я знаю, что это, вероятно, сбивает с толку, поэтому я создал простой пример ниже, чтобы продемонстрировать проблему. Если вы заметили, ссылку нельзя нажимать над кнопками, даже если они находятся вне пути. 

$(() => {

    let $menuToggleButton = $('.menu-toggle-button');
    let $menuItems = $('.menu-item-button').closest('.menu-item');
    let menuItemCount =  $menuItems.length;

    hideButtons($menuItems, menuItemCount, $menuToggleButton);
    $('.menu-items').show();

    $menuToggleButton.on('click', function(e) {
        e.preventDefault();
        let active = $(this).hasClass('active');
        if(active) {
            hideButtons($menuItems, menuItemCount, $(this));
        } else {
            showButtons($menuItems, $(this));
        }
    });

    function hideButtons($menuItems, menuItemCount, $menuToggleButton) {
        let x = 0;
        for (let i = menuItemCount; i > 0; i--) {
            let $menuItem = $menuItems.eq(x);
            let offsetPercentage = `${i * 100}%`;
            $menuItem.css('transform', `translateY(${offsetPercentage})`);
            x++;
        }
        $menuToggleButton.removeClass('active');
    }

    function showButtons($menuItems, $menuToggleButton) {
        $menuToggleButton.addClass('active');
        $menuItems.each(function() {
            $(this).css('transform', 'translateY(0%)');
        });
    }

});
.sliding-pill-menu {
  position: fixed;
  right: 20px;
  bottom: 20px;
  font-size: 12px;
  z-index: 10000;
}

.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.menu-item {
  padding: 5px 0;
  transition: all .4s ease-in-out;
}

.menu-item-button,
.menu-toggle-button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  position: relative;
  bottom: 0;
  cursor: pointer;
  border-radius: 50px;
  background: #EC2127;
  color: #fff;
  font-weight: 500;
  font-size: inherit;
  min-width: 180px;
  width: 180px;
  white-space: nowrap;
}

.menu-item-button:hover, .menu-item-button:active, .menu-item-button:link, .menu-item-button:visited,
.menu-toggle-button:hover,
.menu-toggle-button:active,
.menu-toggle-button:link,
.menu-toggle-button:visited {
  color: #fff;
}

.menu-item-icon,
.menu-toggle-icon {
  margin-right: 10px;
}

.underlay-btn {
background: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="underlay-btn" href="#">Click Me Instead</a>
<div class="sliding-pill-menu">
  <ul class="menu-items">
    <li class="menu-item"><a class="menu-item-button" href="tel:5555555555"><i class="menu-item-icon fa fa-mobile"></i>Call Now</a></li>
    <li class="menu-item"><a class="menu-item-button" href="sms:5555555555"><i class="menu-item-icon fa fa-sms"></i>Send Text</a></li>
    <li class="menu-item"><a class="menu-item-button" href="/order-by-date"><i class="menu-item-icon fa fa-calendar"></i>Check Availability</a></li>
    <li class="menu-item"><a class="menu-toggle-button" href="#"><i class="fa fa-plus menu-toggle-icon"></i>Get Started</a></li>
  </ul>
</div>

Как запретить <ul> блокировать ссылки за ним? Я пробовал z-index, но я не думаю, что он будет работать в этом случае, так как кнопки приложения должны оставаться выше всего остального.

1 Ответ

1 голос
/ 21 января 2020

Обходным решением будет использование свойства pointer-events CSS, чтобы запретить события указателя для содержащего элемента .sliding-pill-menu, и разрешить их только для отдельного .menu-items.

. По сути, вам просто нужно добавить следующее: 

.sliding-pill-menu {  
  pointer-events: none;
}

.menu-item {
  pointer-events: all;
}

См. полный рабочий пример ниже. В дополнение к свойствам CSS, указанным выше, я просто добавил событие щелчка для .underlay-btn, чтобы переключить его цвет фона, чтобы визуально показать, что щелчок работает. 

$(() => {

    let $menuToggleButton = $('.menu-toggle-button');
    let $menuItems = $('.menu-item-button').closest('.menu-item');
    let menuItemCount =  $menuItems.length;
    let underlayBtn = $('.underlay-btn');

    underlayBtn.on('click', function(e) {
       $(this).toggleClass('click-proof');
    });

    hideButtons($menuItems, menuItemCount, $menuToggleButton);
    $('.menu-items').show();

    $menuToggleButton.on('click', function(e) {
        e.preventDefault();
        let active = $(this).hasClass('active');
        if(active) {
            hideButtons($menuItems, menuItemCount, $(this));
        } else {
            showButtons($menuItems, $(this));
        }
    });

    function hideButtons($menuItems, menuItemCount, $menuToggleButton) {
        let x = 0;
        for (let i = menuItemCount; i > 0; i--) {
            let $menuItem = $menuItems.eq(x);
            let offsetPercentage = `${i * 100}%`;
            $menuItem.css('transform', `translateY(${offsetPercentage})`);
            x++;
        }
        $menuToggleButton.removeClass('active');
    }

    function showButtons($menuItems, $menuToggleButton) {
        $menuToggleButton.addClass('active');
        $menuItems.each(function() {
            $(this).css('transform', 'translateY(0%)');
        });
    }

});
.sliding-pill-menu {
  position: fixed;
  right: 20px;
  bottom: 20px;
  font-size: 12px;
  z-index: 10000;   
  pointer-events: none;
}

.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.menu-item {
  padding: 5px 0;
  transition: all .4s ease-in-out;
  pointer-events: all;
}

.menu-item-button,
.menu-toggle-button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
  position: relative;
  bottom: 0;
  cursor: pointer;
  border-radius: 50px;
  background: #EC2127;
  color: #fff;
  font-weight: 500;
  font-size: inherit;
  min-width: 180px;
  width: 180px;
  white-space: nowrap;
}

.menu-item-button:hover, .menu-item-button:active, .menu-item-button:link, .menu-item-button:visited,
.menu-toggle-button:hover,
.menu-toggle-button:active,
.menu-toggle-button:link,
.menu-toggle-button:visited {
  color: #fff;
}

.menu-item-icon,
.menu-toggle-icon {
  margin-right: 10px;
}

.underlay-btn {
background: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}

.click-proof {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="underlay-btn" href="#">Click Me Instead</a>
<div class="sliding-pill-menu">
  <ul class="menu-items">
    <li class="menu-item"><a class="menu-item-button" href="tel:5555555555"><i class="menu-item-icon fa fa-mobile"></i>Call Now</a></li>
    <li class="menu-item"><a class="menu-item-button" href="sms:5555555555"><i class="menu-item-icon fa fa-sms"></i>Send Text</a></li>
    <li class="menu-item"><a class="menu-item-button" href="/order-by-date"><i class="menu-item-icon fa fa-calendar"></i>Check Availability</a></li>
    <li class="menu-item"><a class="menu-toggle-button" href="#"><i class="fa fa-plus menu-toggle-icon"></i>Get Started</a></li>
  </ul>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...