Question

我对javascript不是很好，我有这个javascript代码。当我点击链接时，div显示并隐藏。问题是显示效果，弹出并且看起来不太好所以我希望div在显示时向下滑动。这是代码：

<script type="text/javascript">
var s;
ShowHideWidget = {

    settings : {
       clickHere : document.getElementById('clickHere'),
       dropdown_signup : document.getElementById('dropdown_signup')
    },

    init : function() {
        //kick things off
        s = this.settings;
        this.bindUIActions();
    },

    bindUIActions : function() {
        //Attach handler to the onclick
        /*
        s.clickHere.onclick = function() {
            ShowHideWidget.toggleVisibility(s.showing);
            return false;
        };
        */
        ShowHideWidget.addEvent(s.clickHere, 'click', function() {    
            ShowHideWidget.toggleVisibility(s.dropdown_signup);
        });
    },

    addEvent : function(element, evnt, funct) {
        //addEventListener is not supported in <= IE8
        if (element.attachEvent) {
            return element.attachEvent('on'+evnt, funct);
        } else {
          return element.addEventListener(evnt, funct, false);
        }
    },

    toggleVisibility : function(id) {
        if(id.style.display == 'block') {
          id.style.display = 'none';
        } else {
          id.style.display = 'block';
       };
    }

};

(function() {
    ShowHideWidget.init();
})();
</script>

Answer 1

您可以使用jquery slideDown和slideUp函数来实现它：

添加以下代码：

toggleVisibility : function(id) {
    if( $(id).is(':visible') ){
       $(id).slideUp();
    } else {
       $(id).slideDown();
    }  
}

DEMO

Answer 2

你可以使用类似jQuery的.slideDown功能。你必须自己编写很多代码才能做到这一点。

如何将弹出窗口中的div更改为向下滑动？

2 个答案: