Jquery UI滑动切换在简单的javascript

jquery ui slide toggle in simple javascript

本文关键字：简单 javascript UI Jquery      更新时间：2023-09-26

我必须在简单的javascript中编写jquery UI滑动切换…

<center>
<button id="button" class="myButton">Read More</button>
</center>
<div id="myDiv">
<p>Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom.</p>
</div>

$(".myButton").click(function () {
    var self = $(this);
    // Set the effect type
    var effect = 'slide';
    // Set the options for the effect type chosen
    var options = { direction: $('left').val() };
    // Set the duration (default: 400 milliseconds)
    var duration = 1000;
    $('#myDiv').toggle(effect, options, duration, function() {
        if (self.text() == "Read More") {
            self.text('Read Less');
        } else {
            self.text('Read More');
        }
    });
});

我必须使用纯JavaScript编码相同的功能，任何一个实现请帮助

这段代码可能会有所帮助:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div >
            <div id="test" style="height: 150px; width: 100px; background-color: yellowgreen; display:none">block</div>
        </div>
        <div>&nbsp;</div>
        <div onclick="slideUp(document.getElementById('test'));" style="cursor:pointer;">slide Up</div>
        <div>&nbsp;</div>
        <div onclick="slideDown(document.getElementById('test'))" style="cursor:pointer;">slide down</div>
        <script>
            function slideDown(obj, speed) {
                var mySpeed = speed || 300;
                var intervals = mySpeed / 30; // we are using 30 ms intervals
                //alert('intervals = ' + intervals);
                var holder = document.createElement('div');//
                var parent = obj.parentNode;
                holder.setAttribute('style', 'height: 0px; overflow:hidden');
                parent.insertBefore(holder, obj);
                parent.removeChild(obj);
                holder.appendChild(obj);
                obj.style.display = obj.getAttribute("data-original-display") || "";
                var height = obj.offsetHeight;
                var sepHeight = height / intervals;
                //  alert(sepHeight)
                var timer = setInterval(function() {
                    var holderHeight = holder.offsetHeight;
                    if (holderHeight + sepHeight < height) {
                        holder.style.height = (holderHeight + sepHeight) + 'px';
                    } else {
                        // clean up
                        holder.removeChild(obj);
                        parent.insertBefore(obj, holder);
                        parent.removeChild(holder);
                        clearInterval(timer);
                    }
                }, 30);
            }
            function slideUp(obj, speed) {
                var mySpeed = speed || 300;
                var intervals = mySpeed / 30; // we are using 30 ms intervals
                var height = obj.offsetHeight;
                var holder = document.createElement('div');//
                var parent = obj.parentNode;
                holder.setAttribute('style', 'height: ' + height + 'px; overflow:hidden');
                parent.insertBefore(holder, obj);
                parent.removeChild(obj);
                holder.appendChild(obj);
                var originalDisplay = (obj.style.display !== 'none') ? obj.style.display : '';
                obj.setAttribute("data-original-display", originalDisplay);
                var sepHeight = height / intervals;
                //  alert(sepHeight)
                var timer = setInterval(function() {
                    var holderHeight = holder.offsetHeight;
                    console.log(holderHeight);
                    if (holderHeight - sepHeight > 0) {
                        holder.style.height = (holderHeight - sepHeight) + 'px';
                    } else {
                        // clean up
                        obj.style.display = 'none';
                        holder.removeChild(obj);
                        parent.insertBefore(obj, holder);
                        parent.removeChild(holder);
                        clearInterval(timer);
                    }
                }
                , 30);
            }
        </script>
    </body>
</html>

参考资料:这里…你也可以找到其他答案

相关文章：