由jquery創建的下拉菜單的怪異行爲

對於我個人使用，我開發了一個HTML，CSS & jquery的小下拉菜單。當我運行腳本時，菜單進入和退出。有一些我無法弄清楚的小錯誤。這是我的代碼。任何人都可以看看並告訴我如何解決它。由jquery創建的下拉菜單的怪異行爲

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
<style type="text/css"> 
    a#plinkp 
    { 
     background: #CCC; 
     padding: 10px; 
     cursor: pointer; 
     margin-left: 600px; 
     margin-top: 200px; 
     position: absolute; 
    } 

    a#testll 
    { 
     background: #CCC; 
     padding: 10px; 
     cursor: pointer; 
     margin-left: 600px; 
     margin-top: 250px; 
     position: absolute; 
    } 

    div#HoverSubmenu 
    { 
     background: #fff; 
     position: absolute; 
     top: -12px; 
     left: -20px; 
     z-index: 100; 
     width: 165px; 
     display: none; 
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); 
     border:5px solid; 
     border-color:#F1F2F2; 
     z-index:9999; 
    } 

    div#HoverSubmenu li a 
    { 
     color: #555555; 
     display: block; 
     font-family: arial; 
     font-weight: bold; 
     padding: 6px 15px; 
     cursor: pointer; 
     text-decoration: none; 
    } 

    div#HoverSubmenu li a:hover 
    { 
     background: #39B54A; 
     color: #FFFFFF; 
     text-decoration: none; 
    } 

    .HoverRoot 
    { 
     list-style: none; 
     margin: 0px; 
     padding: 0px; 
     padding: 11px 0 0 0px; 
     border-top: 1px solid #dedede; 
    } 
</style> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('[id*=link]').click(function() { 
       //$("#link").click(function() { 
       $('#HoverSubmenu').insertAfter($('[id*=link]')); 
       $('#HoverSubmenu').css({ left: $(this).offset().left + 'px', 
        top: ($(this).offset().top + $(this).outerHeight()) + 'px', 
        position: "absolute" 
       }); 
       toggleVisibility(); 
       false; 
      }); 


      $("html").click(
      function (e) { 
       if ($(e.target).not("[id*='link']") 
       && e.target.id != "HoverSubmenu" 
       && e.target.className != "HoverRoot" 
       && e.target.className != "HoverLI" 
       && e.target.className != "atag") { 
        //alert(e.target.id); 
         $('div#HoverSubmenu').fadeOut(); 
       } 
      }); 

      function toggleVisibility() { 
       var submenu = $('div#HoverSubmenu'); 
       if (submenu.is(":visible")) { 
        submenu.fadeOut(); 
       } else { 
        submenu.fadeIn(); 
       } 
      } 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <a id="plinkp">About</a> 
    <a id="testll">My Test</a> 
    <%--Hover UPS Menu start--%> 
    <div id="HoverSubmenu"> 
     <ul class="HoverRoot"> 
      <li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with UPS</a></li> 
      <li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with FedEx</a></li> 
     </ul> 
    </div> 
    <%--Hover UPS Menu end--%> 
    </form> 
</body> 
</html>

來源

2013-03-26 Mou

請使用JsFiddle發佈你的代碼，我們可以更容易地測試和調試！ – 2013-03-26 10:59:41

http://jsfiddle.net/tridip/RAGNJ/ – Mou 2013-03-26 11:09:36

試着在你'[id*=link]'單擊處理結束改變這一行：

false;

...是

return false;

演示：http://jsfiddle.net/nnnnnn/tdq3d/

也許你的方式如果你忘記了return部分，那只是一個錯字？無論如何，與return false;它防止點擊事件通過DOM傳播，這意味着它不會到達您綁定到'html'的點擊處理程序。沒有return false;點擊確實傳播了，然後第二個點擊處理程序隱藏了彈出菜單。

也在'html'點擊處理程序if測試沒有做你可能認爲的。第一部分：

 if ($(e.target).not("[id*='link']") 
      && // etc

...永遠是truthy因爲.not() method不返回一個布爾值，它返回一個jQuery對象（與任何對象是truthy）。您可以測試是否.not()通過測試該對象的length屬性返回一個空的jQuery對象（零長度將是falsy）：

 if ($(e.target).not("[id*='link']").length 
      && // etc

我認爲這也將解決你的問題如下所示：http://jsfiddle.net/nnnnnn/RAGNJ/3/

來源

2013-03-26 11:04:37 nnnnnn

由jquery創建的下拉菜單的怪異行爲

回答

相關問題