Question

我在asp.net中创建了一个Web应用程序。其中，我想显示一个div（最初隐藏）当一个按钮被css过渡点击时。

附加要求：

按钮单击时显示的div将在运行时动态添加一些内容。

如何做到这一点？

Answer 1

普通Javascript：

document.getElementById('BUTTON_ID').addEventListener('click', function(){ 
    document.getElementById('DIV_ID').style.display = 'block';
})

或者，使用 jQuery：

$(function(){
    $('#BUTTON_ID').click(function(){ $('#DIV_ID').show() });
});

使用真实元素ID替换BUTTON_ID和DIV_ID。

<强>更新

如果您希望div显示为过渡，我建议使用jQuery，如下所示：

$(function(){
    $('#BUTTON_ID').click(function(){ $('#DIV_ID').fadeIn() });
});

注意.fadeIn()方法，该方法可以替换为.show()，.slideDown()等。 jQuery很有趣。

更新2：

为了将动态内容注入div，请执行以下操作：

$(function(){
    $('#BUTTON_ID').click(function(){ 
        $('#DIV_ID').html('<b>Hello, dynamic content!</b>');
        $('#DIV_ID').fadeIn();
    });
});

希望有所帮助。

Answer 2

以下是来自@geevee的脚本的变体，我倾向于使用很多，DIV将使用close和open选项向上或向下滑动。请注意，500是以毫秒为单位的执行速度，您可以将其更改为适合您的任何内容。

$(function(){
    $('#BUTTON_ID').click(function(){ 

            if ($('#DIV_ID').css('display') =='none')
            {
                $('#BUTTON_ID').html('Show DIV');
                $('#DIV_ID').slideDown(500); 

            }
            else
            {
                $('#BUTTON_ID').html('Hide DIV');
                $('#DIV_ID').slideUp(500); 
            }



    });//end .click
});//end onload

希望这有帮助

在asp.net中用css过渡点击按钮时显示div

2 个答案: