e.target не работает в opera, chrome

Я создал навигационную панель с jQuery, которая, как предполагается, переключает выпадающие списки при нажатии. Большая часть функциональности работает так, как должна.e.target не работает в opera, chrome

$(function() 
 
{ 
 
    var tab = $(".dr-head"); 
 
    var childList = $(".child-list"); 
 
    tab.click(function(e) 
 
    { 
 
     e.stopPropagation(); 
 
     if ($(this).children("ul").css('opacity') == '0') 
 
     { 
 
      $("ul ul").css(
 
      { 
 
       'opacity': '0' 
 
      }) 
 
      $(this).children('ul').css(
 
      { 
 
       'opacity': '1', 
 
       'margin-top': '-15px' 
 
      }).children('li').css(
 
      { 
 
       'display': 'list-item', 
 
       'position': 'relative', 
 
       'left': '-75px', 
 
       'padding-top': '12px' 
 
      }); 
 
     } 
 
     else 
 
     { 
 
      $(this).children('ul').css(
 
      { 
 
       'opacity': '0', 
 
       'margin-top': '0' 
 
      }).children('li').css(
 
      { 
 
       'left': '-75px', 
 
       'padding-top': '0px' 
 
      }); 
 
     } 
 
    }); 
 
    $("body").click(function(e) 
 
    { 
 
     var targ = $(".nav"); 
 
     if (e.target !== targ) 
 
     { 
 
      $(".dr-head").children("ul").css(
 
      { 
 
       'opacity': '0' 
 
      }); 
 
     } 
 
    }) 
 
});

<!doctype html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" href="nav.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
     <script src="nav.js"></script> 
 
    </head> 
 
    <body> 
 
     <nav class="nav"> 
 
      <ul> 
 
       <li><a href="http://sarkelliancreed.comule.com">SarkellianCreed.com</a></li> 
 
       <li class="dr-head"><a href="#">Learn</a> 
 
        <ul> 
 
         <li><a href="http://sarkelliancreed.comule.com/learn/web-design">Web Design</a></li> 
 
         <!-- <li></li> --> 
 
        </ul> 
 
       </li> 
 
       <li class="dr-head"><a href="#">Tutorials and Snippets</a> 
 
        <ul> 
 
         <li><a href="http://sarkelliancreed.comule.com/c/snippets/">Password Generator</a></li> 
 
        </ul>  
 
       </li> 
 
      </ul> 
 
     </nav> 
 
    </body>

Все работает правильно, но когда я нажимаю вне навигационной панели, то выпадающие не уходят. Как я могу сделать эти работы? http://sarkelliancreed.comule.com/c/new/nav

источник

2015-08-14 TricksfortheWeb

Ваш код работает нормально. В настоящее время ваш элемент тела < занимает только высоту и ширину навигационной панели.

После того, как вы добавите больше контента на свою страницу, он увеличит высоту < body> element.

Например, вот один пример, где я поставил CSS:

height:500px 
background-color:orange

< для тела> и он будет работать, когда вы щелкните в любом месте внутри тела <> элемента.

JSFiddle: https://jsfiddle.net/j66wjtmy/

источник

2015-08-14 20:52:29 Chitrang

Так ты говоришь, что все, что я нажимаю на это нав бар, и, следовательно, не будет скрывать выпадающие? – TricksfortheWeb

@ yak613, я отредактировал сообщение, чтобы объяснить, как роль тела играет роль. – Chitrang

e.target не работает в opera, chrome

ответ

Смежные вопросы