当前位置：文江博客话题详情

meganu 中的 Colorbox 无法正常工作？

发布于 2025-01-07 08:49:19 字数 465 浏览 5 评论 0原文

超级菜单： http://www.geektantra.com/projects/jquery-megamenu-2/

这是问题的一个小示例：http://kennylam.net/WIP/sandbox/example1/index.html

问题是什么，当从直接链接作为 iframe 调用 colorbox 时，它工作得很好。但是，当我尝试从 megamenu 下拉菜单中调用它时，它只是打开不使用 colorbox 的页面。我看过代码，但我自己不太擅长 Javascript。

有人可以看一下发生了什么吗？

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜清冷一曲。 2025-01-14 08:49:19

试试这个：

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

try this:

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

回复收藏 0 原文

~没有更多了~