Javascript:Div onclick 不适用于某些 div 内容

Question

我想在单击该 div 时展开/折叠该 div。它已经可以与 onmouseover/onmouseout 配合使用，但我更喜欢 onclick。

现在，问题似乎出在 div 的内容上:

这有效:

<div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;">
</div>

这不起作用:

<div onclick="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

但是这个(onmouseover而不是onclick)再次起作用:

<div onmouseover="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

我想这一定是一些分层问题，但我尝试将“onclick”放入每个不同的 div/iframe 层中，但无法使其工作。我是一个初学者，如果能得到关于错误的提示就太好了!谢谢!

Answer 1

我建议使用 JQuery 来实现此目的。

你可以用 1 行代码做你想做的事。

像这样编写一个test.js:

  $(document).ready(function() {

   // hides the div as soon as the DOM is ready

    $('#yourDiv').hide();

   // shows the div on clicking the noted link  

    $('#yourDiv-show').click(function() {

      $('#yourDiv').show('slow');

      return false;

    });

   // hides the div on clicking the noted link  

    $('#youDiv-hide').click(function() {

      $('#yourDiv').hide('fast');

      return false;

    });
   // toggles the div on clicking the noted link  

    $('#youDiv-toggle').click(function() {

      $('#yourDiv').toggle(400);

      return false;

    });

  });

然后将此 javascript 导入到您的 HTML、JSP 等...