2015-08-14 72 views
0

我用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

回答

2

您的代碼工作正常。 目前,您的< body>元素僅佔用導航欄的高度和寬度。

一旦你添加更多的內容到你的頁面,它會增加高度< body>元素。

例如,下面是一個例子,我設置CSS:

height:500px 
background-color:orange 

爲<體>,當你點擊裏面< body>元素中的任何地方它會奏效。

的jsfiddle:https://jsfiddle.net/j66wjtmy/

+0

所以你說,不管我點擊是導航欄,因此不會隱藏在下拉菜單? – TricksfortheWeb

+0

@ yak613,我編輯帖子來解釋身體的高度是如何起作用的。 – Chitrang

相關問題