可展开按钮

Expandable Buttons

本文关键字：按钮 可展开      更新时间：2023-09-26

我一直在尝试创建可扩展按钮，就像这个网站底部的按钮一样(http://mastermechanic.ca/services.php)，但我一直想不通。我是JavaScript的初学者，如果有任何帮助，我们将不胜感激。

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}

尝试定义按钮的宽度。。。

参见示例JS Fiddle

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

我已经制作了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>

Fiddle链接：http://jsfiddle.net/dHq74/3/

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

它们使用Jquery&Css，当用户点击"按钮"时，它会添加类"fullheight"，当用户再次点击它时，它将添加类"smallheight"

$( "#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。

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

相关文章：