将两个按钮元素合并为一个。

Question

我想知道如何制作一个看起来像普通按钮的按钮，但左边执行X操作，右边执行Y操作。

例如，当我点击此按钮的左侧时，它会运行一个表单。我点击右侧，它运行另一个表单。 该按钮需要看起来像普通按钮，因此用户只能看到一个按钮。

- Toby Mellor

---

有趣的请求。 :) 一个想法是在禁用（正常）按钮上方放置不可见的CSS块？ - sinisake

为什么不让两个按钮看起来像一个，然后使用JavaScript样式来控制另一个按钮，如果你想要在其中一个上执行操作来改变另一个？ - StackSlave

@PHPglue - 你会怎么做？ - PM 77-1

嗯，我不确定如何将文本添加到按钮上，使其看起来像一个整体...如果有人能够制作一个JSfiddle，那将不胜感激。非常感谢你们的建议！:D - Toby Mellor

我建议使用SomeKittens的解决方案，但也可以处理点击事件，并根据鼠标相对于按钮的位置执行不同的操作。 - attila

Answer 1

这听起来像是糟糕的用户界面。用户应该能够看到按钮之间的区别。您应该创建两个按钮，呈“药片”形式如下图所示:

通过对第二个按钮应用负边距：

#second-button {
    margin-left: -4px;
}

JSFiddle

如果您仍然想这样做，您可以删除边框使它们合并成一个：

JSFiddle

- SomeKittens

Answer 2

类似这样的东西可以起作用：

<button>
    <span class="left-part">Button</span>
    <span class="right-part">value</span>
</button>

那么你可以将不同的事件监听器绑定到左右的span。

示例：http://jsfiddle.net/2L8uN/（以及带有样式的span填充版本版本）

- dfsq

---

这看起来非常不错。它在Chrome上完美运行，尽管我无法让它在Firefox上工作。我会努力提高兼容性。感谢您的回答。 - Toby Mellor

这样做更加明智。 - raj240

Answer 3

使用 jQuery，您应该这样做：

$('#splitbutton').click(function(e) {
    if (e.clientX < $(this).offset().left + $(this).outerWidth() / 2)
        console.log('left');
    else
        console.log('right');
});

不过我同意，UI 确实很不寻常 :)

- luciole75w

Answer 4

我曾经为总统想过一个类似的好主意。按钮的一侧会喷洒整个房间的M+Ms，而另一侧则会引发全面核战争。他说过，并且我引用他的话，“很棒的用户界面设计，让他们猜测不停！”。

（轰隆声）

- LiverpoolsNumber9

Answer 5

我认为你正在寻找的一个很好的预制版本是Twitter Bootstrap实现的“按钮工具栏”。你可以在这里查看。

- Sam Hanley

---

你好，我正在寻找类似于普通按钮的东西。因此，对于普通用户来说它是不可见的。 - Toby Mellor

哦，那么我猜被采纳的答案是最好的方法。我只是没有想到你的目标是恶作剧/混淆用户！ - Sam Hanley

Answer 6

http://jsbin.com/xuyocica/1 纯CSS和HTML，无需JavaScript

- Waheed Rahman