HTML JS onclick切换不起作用

Question

<script>
var comp101_note = document.getElementById("comp101_note");
var comp101_pdf = document.getElementById("comp101_pdf");
    comp101_note.onclick = function(){
        comp101_pdf.slideToggle();
    };
</script>

<html>

<table>
<tr><td>Ders</td></tr>

<tr><td id="comp101_note">COMP101</td></tr>
</table>

<object width="400" height="400" data="1.pdf" id="comp101_pdf"></object>

</html>

i want to do it like var etc. because of i will use these code in windows application 我想像var等一样做，因为我将在Windows应用程序中使用这些代码

Answer 1

slideToggle是一个jQuery函数，因此将comp101_pdf包装到一个jQuery对象中，即$(comp101_pdf).slideToggle();

Answer 2

You just can't use slideToggle directly. 您只是不能直接使用slideToggle。 Either you have to do it using some javascript functionality. 您要么必须使用某些javascript功能来做到这一点。 In case of Vanilla Javascript (plane javascript) we have to write whole animations on our own. 如果使用Vanilla Javascript（平面javascript），我们必须自己编写整个动画。 So suggestion would be go with jQuery liberary. 因此建议与jQuery liberary一起使用。 If you still don't want to go with jQuery then you have to go with CSS3 transition animation and change some property based on which transition will occur. 如果仍然不想使用jQuery，则必须使用CSS3过渡动画，并根据将要发生的过渡来更改某些属性。

Both codes are as follows : 这两个代码如下：

jQuery : jQuery的：
$('element selector class or id').slideToggle();
CSS3 Transition : HTML Code : CSS3过渡：HTML代码：
<div class='myClass'>Some Text</div>

CSS Code : CSS代码：

.myClass{height:0px;transition : height 1s linear;}
.myClass.mySlideOpen{height:100px}

Now if mySlideOpen is applied to myClass div then it's height will increase with linear animation with duration 1 second. 现在，如果将mySlideOpen应用于myClass div，则其高度将随着持续时间为1秒的线性动画而增加。

Answer 3

A) Use proper HTML structure (Eg ) B) Use jQuery to to quickly access objects and you must use "READY" C) You are executing your code before browser render your HTML in memory, that's why you need to follow section BD) You can't toggle tag, place them in DIV A）使用适当的HTML结构（例如）B）使用jQuery快速访问对象，并且必须使用“ READY” C）浏览器在内存中呈现HTML之前正在执行代码，因此需要遵循BD节）无法切换标签，将其放入DIV中

<html>

    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
        <script>

            $( document ).ready(function() {
                // When document is fully loaded:
                $( "#comp101_note" ).click(function() {
                    $('#comp101_pdf').slideToggle("fast", function() {
                        // Animation complete.
                    });
                });
            });
        </script>
    </head>
    <body>
        <table>
        <tr><td>Ders</td></tr>

        <tr><td id="comp101_note">COMP101</td></tr>
        </table>
        <div id="comp101_pdf">
            <object  width="400" height="400" data="1.pdf"></object>
        </div>
</html>

HTML JS onclick切换不起作用

问题描述

3 个解决方案

解决方案1
1 2017-01-09 14:47:24

解决方案2
1 2017-01-09 14:59:02

解决方案3
0 2017-01-09 15:22:24

HTML JS onclick切换不起作用

问题描述

3 个解决方案

解决方案1 1 2017-01-09 14:47:24

解决方案2 1 2017-01-09 14:59:02

解决方案3 0 2017-01-09 15:22:24

解决方案1
1 2017-01-09 14:47:24

解决方案2
1 2017-01-09 14:59:02

解决方案3
0 2017-01-09 15:22:24