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>

我想像var等那样做因为我将在Windows应用程序中使用这些代码

Answer 1

slideToggle是一个jquery函数，所以将comp101_pdf包装到jquery对象中，即$(comp101_pdf).slideToggle();

Answer 2

您无法直接使用slideToggle。要么你必须使用一些JavaScript功能。在Vanilla Javascript（平面javascript）的情况下，我们必须自己编写整个动画。所以建议将与jQuery liberary一起使用。如果您仍然不想使用jQuery，那么您必须使用CSS3过渡动画并根据将发生的转换更改某些属性。

两个代码如下：

jQuery：

$('element selector class or id').slideToggle();
CSS3转换： HTML代码：

<div class='myClass'>Some Text</div>

CSS代码：

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

现在，如果将mySlideOpen应用于myClass div，那么它的高度将随着持续时间为1秒的线性动画而增加。

Answer 3

A）使用适当的HTML结构（例如） B）使用jQuery快速访问对象，你必须使用＆＃34; READY＆＃34; C）您在浏览器在内存中呈现HTML之前执行代码，这就是您需要遵循B部分的原因 D）您无法切换标签，将其置于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 个答案: