2012-02-18 89 views
0

Megamenu:http://www.geektantra.com/projects/jquery-megamenu-2/megamenu內的Colorbox無法正常工作?

問題在這裏的一個小例子:http://kennylam.net/WIP/sandbox/example1/index.html

的問題是什麼,當顏色框從直接鏈接作爲一個iframe調用,它完美的罰款。但是,當我嘗試從megamenu下拉菜單中調用它時,它只是打開不使用colorbox的頁面。我已經看了一下代碼,但是我自己並不擅長Javascript。

有人可以看一看,看看發生了什麼?

謝謝。

+0

所以我已經將範圍縮小到這一行'e.stopPropagation();'在jquery.megamenu.js ...當我刪除它,它完美的作品。刪除這條線是否安全? – Kenny 2012-02-18 07:42:02

回答

0

試試這個:

<head> 
    <meta charset='utf-8'/> 
    <title>ColorBox Examples</title> 
    <style> 
     body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;} 
     a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} 
     h2{font-size:13px; margin:15px 0 0 0;} 
    </style> 
    <link rel="stylesheet" href="colorbox.css" /> 
    <link rel="stylesheet" href="../stylesheets/jquery.megamenu.css" type="text/css" media="screen" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script src="../colorbox/jquery.colorbox.js"></script> 
    <script src="../javascripts/jquery.megamenu.js" type="text/javascript"></script> 
    <script> 
     $(document).ready(function(){ 
      //why not move the megamenu includes (the css and js files) above and init it here 
      $(".megamenu").megamenu(); 
      //now try to bind the colorbox 
      //this is the one that is being used on your example page 
      $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); 

      //if that is still not working you may have to unbind the click function from the a tag inside the mega menu 

     }); 
    </script> 
</script> 


</head> 
<body> 
    <h1>ColorBox Demonstration</h1> 

    <p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p> 


     <ul class="megamenu"> 
    <li> 
    <a href="javascript:void(0)">Colorbox within megamenu</a> 

    <div style="width: 500px;"> 
     <p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p> 


     </table> 
    </div> 
    </li> 
    </ul> 

</body>