Question

我尝试使用概述on this answer的技巧来关闭我设计的页面上的导航菜单。但是，页面上的大部分空间都被iframe占用，iframe会加载与包含iframe的页面存储在同一服务器上的文章。

如果单击父页面上的任何元素，菜单将按原样关闭。但是，单击iframe中的任何空格都不会关闭菜单。

我假设这是因为父页面没有捕获iframe内发生的事件。就像我说的那样，两个页面都存储在同一台服务器上，那么当用户在iframe中点击时，如何捕获点击以关闭我的菜单？

HTML：

<div id="menucontainer">
<nav id="mobilemenu">
    <ul>
        <li><span class="menutrigger">&#9776; Menu</span></li>
    </ul>
</nav>
<nav id="fullmenu">
    <ul>
        <li><a href="page1.html" target="content">Menu Item 1</a></li>
        <li><a href="page2.html" target="content">Menu Item 2</a></li>
        <li><a href="page3.html" target="content">Menu Item 3</a></li>
        <li><a href="page4.html" target="content">Menu Item 4</a></li>
    </ul>
</nav>
</div>
<div id="frame">
        <iframe name="content" id="content" src="intro.html"></iframe>
</div>

JQuery的：

$(document).ready(function() {
    $("a[target='content']").click(function() {
        if ($("#mobilemenu").css("display") == "block" ){
            $('#fullmenu').hide();
        }
    });
    $('html').click(function() {
        $('#fullmenu').hide();
    });
    $('#menucontainer').click(function(event){
        event.stopPropagation();
    });
    $('.menutrigger').click(function() {
        $('#fullmenu').toggle();
    });
});

CSS：（添加，因为它发生在我身上，可能会影响事情）

html, body { height: 100%; width: 100%; }

nav, #frame { position: absolute; right: 0; left: 0; padding: 0; margin: 0; width: 100%; }

#content { height: 100%; width: 100%; }

#frame { top: 38px; bottom: 14px; }

nav { width: 100%; z-index: 100; }

#fullmenu { display: none; position: absolute; top: 38px; width: 100%; }

#mobilemenu { display: block; height: 38px; top: 0; background: #333; }

.menutrigger { font-size: 20px; font-weight: bold; padding: 1px 8px; color: #FFF; cursor: pointer; }

#frame { top: 38px; bottom: 14px; }

nav ul { position: relative; width: 100%; background: #333; list-style: none; display: inline-block; padding: 0; }

nav ul:after { clear: both; }

nav ul li { height: 29px; float: none; min-width: 110px; font-size: 14px; padding: 4px 4px; font-family: 'Roboto Condensed', sans-serif; }

nav ul li a { display: block; padding: 5px; color: #FFF; text-decoration: none; }

nav ul li:hover { background: #666; display: inline-block; height: 29px; }

nav ul li:hover a { color: #FFF; }

Answer 1

Working Demo

而不是

$('html').click(function() {
    $('#fullmenu').hide();
});

使用

$('html').click(function() {
    $('#fullmenu').hide();
});

//get iframe contents and bind click on them.
$('#content').contents().click(function(){
    $('#fullmenu').hide();
});

Answer 2

当iframe位于其他域时，contents（）。click（）不起作用。尝试进行内容（）调用时，您将收到跨域访问错误。

外部关闭菜单单击iFrames页面

2 个答案:

Working Demo