元素因重叠而无法点击 div

Question

我在 fafa 菜单上有一个透明背景，单击时从年龄的左侧开始动画。因为背景是透明的，所以我需要在我的 jquery 中使用 fadeTo 在单击时隐藏 fa fa-bars，这样当菜单被扩展时它不会出现在 fa fa-remove 后面。现在 fa fa-remove 无法点击，我找不到任何修复它的方法。

Fiddle Here

var main = function() {

  $('.menu-icon').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('#jumbotron').animate({
      left: "300px"
    }, 200);

    $('.menu-icon').fadeTo(
      "fast", 0);

  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-300px"
    }, 200);

    $('#jumbotron').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

Answer 1

如果您正在使用 CSS3，您可以尝试使用 pointer-events css 属性。

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

Answer 2

您总是点击菜单 class。您必须将图标关闭元素从嵌套菜单 div 中取出，然后像处理菜单元素一样为这两个元素设置动画。浏览器无法告诉您单击图标关闭，因为它嵌套在菜单内，这就是它不会触发的原因。浏览器只能看到你重复点击“.menu”元素。希望这可以帮助。我修复了它的jsfiddle。只需将图标关闭从菜单中取出 div。（编辑）您可能希望将图标关闭到菜单上方的 z-index div 以使其起作用。

Answer 3

你可以像我在this example

中那样做一个解决方法

所以我使用 opacity 和 if-else 语句将打开和关闭功能与 .menu-icon 上的 click 事件集成在一起：

$('.menu-icon').click(function() {
   if ($(this).css("opacity") == 1) {
      $('.menu').animate({
         left: "0px"
      }, 200);

      $('#jumbotron').animate({
         left: "300px"
      }, 200);

      $('.menu-icon').fadeTo("fast", 0);

   } else {

      $('.menu-icon').fadeTo("fast", 1);

      $('.menu').animate({
          left: "-300px"
      }, 200);

      $('#jumbotron').animate({
          left: "0px"
      }, 200);
  }
});

Answer 4

抱歉刚才给你理论。这是更新后的代码：

在你的HTML中使用这个：

    <div class="icon-close">
            <i class="fa fa-remove fa-3x"></i>
         </div>
       <div class="menu">

      <!-- Menu icon -->



         <ul>
            <li>Home</li>
            <li>About Me</li>
            <li>Contact Me</li>
            <li>Gallery</li>
        </ul>
    </div>

<div id="jumbotron">

    <div id="icon-move">
    <div class="menu-icon">
        <i class="fa fa-bars fa-3x"></i>
        </div>


</div>

</div>

在你的JQuery中，这个：

var main = function() {

  $('.menu-icon').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('#jumbotron').animate({
      left: "300px"
    }, 200);

    $('.menu-icon').fadeTo(
      "fast", 0);


    $('.icon-close').animate({
      left: "0px"
    }, 200);

  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-300px"
    }, 200);

    $('.icon-close').animate({
      left: "-300px"
    }, 200);

        $('.menu-icon').fadeTo(
      "fast", 1);

    $('#jumbotron').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

干杯。

元素因重叠而无法点击 div

Element unclickable because of overlapping div

css

jquery

overlapping