带有子按钮的按钮答案

【问题标题】：button with sub buttons带有子按钮的按钮
【发布时间】：2013-03-11 04:15:54
【问题描述】：

我目前有 2 个按钮（输入提交）Save、Save & Go，我们正在寻找添加第三个按钮，Save & Close。由于房地产，这里没有第三个按钮的空间，所以我们的想法是将它们组合成某种下拉菜单。

我知道使用 A 和隐藏 div 的 css 可能是更好的解决方案，但是，由于应用程序的编码方式是在它所在的接口中编码，这些需要输入或按钮才能返回结束（一个类似 node.js 的衍生物）来接受它。

有没有办法制作这样的东西？

只显示

|"Save"|

但如果存在选项（基于其他脚本参数），则显示向下箭头，如

 |"Save *down*"|

并在鼠标悬停下方显示 2 个（或 1 个或更多）子选项：

| "and go" | "and close" |

关键点是所有 3 个条件都必须提交（可能只想保存而不去或关闭）。

同样，所有 3 个都需要输入 type='submit' 所以我不确定在这种情况下如何设置悬停状态等。通常会使用带有 a:hovers 和 Intent 的列表和子列表。

我运行 jquery 并设置了 html 5，所以标准前端的东西都可以使用，但后端是它变得棘手的地方。

有什么“更好的方法”来解决这个问题的建议吗？

【问题讨论】：

标签： jquery css menu hover suckerfish

【解决方案1】：

像这样创建一个选择下拉列表：

<select onchange="this.form.submit()">
    <option value="save">Save</option>
    <option value="save&go">Save & Go</option>
    <option value="save&close">Save & Close</option>
</select>

给它 3 个选项，保存、保存并开始、保存并关闭

【讨论】：

是的，这可行。但这并不“漂亮”。出于用户界面的原因，想用按钮来解决它。
您可以使用 css 编辑下拉列表，使其看起来很漂亮。这是“我认为”最好的选择

【解决方案2】：

对我来说，这似乎是一个设计问题。只需一个“保存”按钮。保存后，会显示一个带有“开始”和“关闭”按钮的对话框。如果用户不想选择“开始”和“关闭”按钮中的任何一个，您可以在对话框的右上角显示“X（对话关闭）”。

【讨论】：