html点击按钮状态改变,添加元素的状态改变按钮的Html

/* css for button to change size on click */

.button:focus {

width: 99%;

height: 500px;

}

//below is the script that handles the auto scroll to the button clicked on screen.

$(document).ready(function() {

$('.button').click(function() {

$('html,body').animate({ scrollTop: $(this).offset().top - (($(window).height()/1.5) - $(this).outerHeight(true))/2 }, 2000);

$(this).empty(); //empty title and author to prepare for recipe

$(this).append("Recipe Instructions Below");

});

});

在一个网站我建设我拉添加到数据库中的最新信息，并在一个按钮，可点击显示每一行。我的目标是按钮的大小约为100px×60px，点击“聚焦”将会增加到屏幕宽度。添加元素的状态改变按钮的Html

现在，当我点击按钮时，我想清空按钮并用数据库中的更多信息替换它，即点击配方的说明。当我随后忽略或点击按钮时，我希望它恢复到原来的状态，只显示食谱名称和作者。

我在看这个的方式是按钮是对象，但我认为这是非常错误的。如果可能的话，任何人都可以给我任何反馈，以便更智能和更有效的方式来解决这个问题，因为我唯一的问题是单击时向按钮添加更多元素。我真的很感激任何反馈。

2016-04-06

Nathan