Question

我在fafa菜单上有一个透明的背景，点击时从左边开始动画。因为背景是透明的，所以我需要在我的jquery中使用fadeTo，以便在点击时隐藏fa fa-bars，这样当菜单延伸出来时它就不会显示在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

您总是点击菜单类。您必须从嵌套菜单div中取出图标关闭元素，然后像使用菜单元素一样为两个元素设置动画。浏览器无法告诉您单击关闭图标，因为它嵌套在菜单中，这就是它不会被激活的原因。浏览器只能看到你反复点击＆＃34; .menu＆＃34;元件。希望这可以帮助。我修好了jsfiddle。只需从菜单div中取出图标即可。（编辑）你可能想要将菜单div上方的图标对其进行z索引，以使其正常运行。

Answer 2

如果您使用的是CSS3，则可以尝试使用pointer-events css属性。

除了指示该元素不是鼠标事件的目标之外，值none指示鼠标事件“穿过”该元素并将目标转移到该元素的“下面”。

Answer 3

你可以像我在this example

中那样做一个解决方法

所以我使用click和.menu-icon语句在opacity上使用if-else事件整合了开始和结束功能：

$('.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而无法点击

4 个答案: