Question

我一直在努力创建可扩展的按钮，就像这个站点底部附近的按钮一样（http://mastermechanic.ca/services.php），但我一直无法搞清楚。我是JavaScript的初学者，所以任何帮助都会非常感激。

Answer 1

HTML： <button id="lol">Some long text</button>

CSS：#lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px}

Answer 2

尝试为按钮定义宽度...

参见示例JS Fiddle

#lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px; width: 50%;}

Answer 3

我已经制作了CSS，您可能需要在下面的链接中找到确切的按钮。我希望它有所帮助。助威。

CSS：

.big {
  background: #fb7303;
  height: 100px;
  width: 250px;
  border: 5px solid #ffa500;
  border-radius:10px;
  color: white;
  font-size: 20px;
 }

HTML：

 <button class="big">Schedule <br>Maintenance</button>

小提琴链接：http://jsfiddle.net/dHq74/3/

Answer 4

我没有创建一个非常详细的例子，但这应该让你走上正轨。你可以在这里玩弄它。

他们使用Jquery＆amp; amp; Css，当用户点击＆＃34;按钮＆＃34;它增加了课程＆＃34;全高＆＃34;，当再次点击它时，它会增加一个课程＆＃34; smallheight＆＃34;

$( "#reveal-container" ).toggleClass("smallheight");
$( "#reveal-container" ).toggleClass("fullheight");

我 DIDNT 这样做。购买也许你仍然可以从我的例子中受益：

我刚刚像他们一样创建了一个容器DIV，然后使用Jquery将其滑动打开和关闭：

<强>的jQuery

 $(".button").click(function () {
        $button = $(this);
        $content = $button.next(); 
        $content.slideToggle(500, function () {   
         });

    });

有关完整示例，请参阅FIDDLE。

希望这会对你有所帮助。：）

可扩展按钮

4 个答案: