Question

我需要隐藏框架＆＃34; topFrame＆＃34;和＆＃34;菜单＆＃34;当我点击任何图像或按钮时，当我再次点击它时取消隐藏它。有没有办法轻松实现？

很抱歉没有发布＆＃34; topFrame＆＃34;和＆＃34;菜单＆＃34; jsp文件，因为它们在我的应用程序中动态呈现。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="/jquery-1.10.2.min.js" language="javascript"></script>
        <style type="text/css"></style>
    </head>


        <frameset rows="80,*" frameborder="no" border="0" framespacing="0">
            <frame src="/someAction1.do" name="topFrame" scrolling="no" noresize="">

            <frameset cols="20%,80%*" frameborder="0" framespacing="0" border="0">
                <frame src="/someAction2.do" name="menu" marginheight="0" marginwidth="0" noresize="true" scrolling="auto" framespacing="0" border="0" frameborder="0">
                <frame src="/someAction2.do" name="information" marginheight="0" marginwidth="0" scrolling="auto" framespacing="0" border="0" frameborder="0">
            </frameset>

        </frameset>

        <noframes>
            // ...
        </noframes>

</html>

Answer 1

使用 toggle() 功能显示/隐藏。

$('button').on('click',function(){
    $('frame[name="topFrame"],frame[name="menu"]').toggle();
});

如果按钮也是动态生成的，则委派很重要。

$(document).on('click','button_or_img',function(){
    $('frame[name="topFrame"],frame[name="menu"]').toggle();
});

Answer 2

我认为以下内容会对您有所帮助。代码非常简单，不言自明......

<html>
    <head>
        <script>
            function show1()
            {
                document.getElementById("div_main").style.visibility = "visible";
            }
            function close_dialog()
            {
                document.getElementById("div_main").style.visibility = "hidden";
            }
        </script>
        <style>
            *
            {
                margin:0px;
                padding:0px;
            }
            #div_main
            {
                height:100%;
                width:100%;
                background-color:rgba(204,204,204,.8);
                z-index:300;
                position:fixed;
                visibility:hidden;
            }
            #cls_btn
            {
                height:100px;
                width:100px;
                margin-left:50%;
            }
            body
            {
                background-color:#09F;
            }
        </style>
    </head>
    <body>
        <div id="div_main">
            <input type="button" value="Close Me" onClick="close_dialog()" id="cls_btn">
        </div>
        <input type="button" value="Click Me" onClick="show1()">
    </body>
</html>

Answer 3

我认为它会起作用：

$("#button").click(function(){
    $('[name="menu"]').toggle();
    $('[name="information"]').toggle();
});

Answer 4

你可以通过fadeToggle（）/ toggle（）来实现。

$('img, button').click(function () {
    $('frame[name="topFrame"], frame[name="menu"]').fadeToggle("slow");
});

Answer 5

在body结束标记之前在页面底部添加此代码：

<script>
    (function(){
        $('img, button').on("click" , function (e) {
            $('frame[name="topFrame"], frame[name="menu"]').toggle();
        });
    }());
</script>

使用JavaScript或jQuery显示和隐藏框架

5 个答案: