2012-02-18 57 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>