Элемент unclickable из-за перекрытия div

Question

У меня есть прозрачный фон в меню fafa, который анимируется слева от возраста клика. Поскольку фон прозрачен, мне нужно было использовать fadeTo в моем jquery, чтобы скрыть fa fa-бары, когда он был нажат, чтобы он не отображался позади fa fa-remove, когда меню было расширено. Теперь fa fa-remove является unclickable, хотя и я не могу найти ничего, что его исправляет.

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, а затем оживить оба элемента, как вы это делали с элементом меню. Браузер не может сказать, что вы нажимаете на значок рядом, так как он вложен внутри меню, поэтому он не срабатывает. Браузер может видеть, как вы неоднократно нажимаете элемент «.menu». Надеюсь это поможет. Я исправил его. Просто вытащите значок из меню 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); 

Приветствия.