Question

我的HTML：

    <!doctype html>
    <html>
    <head>
    <title>Public Vision</title>
    <link rel="stylesheet" type="text/css" title="backbone" href="backbone.css">
    <link rel="alternative stylesheet" type="text/css" title="alt" href="alt.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body class="style2">
    <div id="header" class="style2"><div id="header2" class="style2">Public Vision</div></div>
    <iframe width="640" height="400" 
     src="https://www.youtube.com/embed/videoseries?list=PLX9_I-EOJPdFuOjcI2zkmTck55homHEBE" 
     frameborder="2" allowfullscreen></iframe>

    <input id="showHideContainer" type="image" src="off.jpeg " height="3%" width="2%" alt="On" onclick="toggle()";>

    <script>
    function toggle(){
$('body').toggleClass('style2');
    }
    </script>
    <script>
    document.getElementById('showHideContainer').onclick = function() {
    divTest = document.getElementById('header');
    if (divTest.style.display === "none") {
    divTest.style.display = 'block';
    }
    else {
    divTest.style.display = "none";
     }
    }
    </script>
    </body>
    </html>

我的CSS：

     #header {height: 15%; width: 100%; background-color: white; z-index: 2; position: fixed; right:0; top:0;


    box-shadow: 0 4px 4px -2px #232323;
   -moz-box-shadow: 0 4px 4px -2px #232323;
   -webkit-box-shadow: 0 4px 4px -2px #232323;
   }   

   #header2{height: 15%; width: 100%; position: fixed; color:grey; opacity:  0.6; text-align: center; z-index: 4; font-size: 30px; margin-top: 2.5%;    background-color:clear;}
   iframe {display:block; margin: 0 auto; margin-top: 17%;}


   body{
   background-color:grey; z-index:3;
      }
   body.style2{
    background-color:white; z-index:3;
     }

目前，我现在拥有的图片在点击时会使标题消失。关于如何使图像使标题消失和背景改变颜色的任何想法？真的在这里打砖墙。提前谢谢！

Answer 1

它无法正常工作的原因是，您现在正在覆盖JavaScript中的onclick事件。您的onclick元素上的input开头，然后当您在JavaScript中再次设置onclick时，它会覆盖调用onclick的原始toggle()

解决此问题的一种方法是使用event listeners，它支持将多个函数绑定到onclick，但在您的情况下，将toggleClass添加到{{}}更容易{1}}您在JS中定义，并删除onclick标记中的内容。下面是一个示例，通过对每个函数使用一个input函数来切换标题可见性和背景颜色：

现场演示：

onclick

document.getElementById('showHideContainer').onclick = function () {
    divTest = document.getElementById('header');
    if (divTest.style.display === "none") {
        divTest.style.display = 'block';
    } else {
        divTest.style.display = "none";
    }
    $('body').toggleClass('style2');
};

body {
    background-color:grey;
    z-index:3;
}
body.style2 {
    background-color:white;
    z-index:3;
}

JSFiddle版本：https://jsfiddle.net/66cn8L1b/1/

Answer 2

在同一个点击事件中使用$('body').toggleClass('newClass');隐藏标题。这是小提琴演示http://jsfiddle.net/ff2o7gmy/1/。

如何通过单击按钮使标题消失并重新出现，并使按钮更改我的页面背景

2 个答案: