javascript - 如何防止固定位置 覆盖链接从而阻止它们被点击？

Question

我已经编写了一些在移动设备上显示在我们网站右下角的按钮，并将它们与 <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，但我认为它在这种情况下不起作用，因为应用程序按钮需要保持在其他所有内容之上。

Answer 1

解决方法是利用 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>