Question

我有以下代码：

<div class="top-item">
    <i class="fa fa-history"> </i> 
    <span class="history item"> History</span>
    <button onclick="myFunction()"></button>
</div>

我想要获得的是当我点击文本时，历史记录，表现得像点击按钮一样。我做了它，但只有在该区域中也可以看到按钮，例如this image。

如何摆脱按钮但保留其功能？

Answer 1

您可以使用以下

更新HTML

<div class="top-item">
    <i class="fa fa-history"> </i> 
    <span class="history item" onclick="myFunction()"> History</span>
</div>

或为此

添加以下CSS

.top-item button {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
}

<div class="top-item">
    <i class="fa fa-history"> </i> 
    <span class="history item"> History</span>
    <button onclick="myFunction()"></button>
</div>

或者您可以使用display: none

.top-item button {
    display: none;
}

<div class="top-item">
    <i class="fa fa-history"> </i> 
    <span class="history item"> History</span>
    <button onclick="myFunction()"></button>
</div>

Answer 2

你可以使用js和css的组合来实现这个目标：

CSS

$('.history').on('click', function()
{
    //do some stuff
})

JS / jQuery的

attemptLogin()

然后你不需要隐藏按钮 - 只需一个脚本：）

也不做内联js / css - 导致难以维护的代码是不好的做法：）

Answer 3

如果您想触发按钮上的单击操作，则可以使用jQuery

进行其他操作

$('.history').on('click', function() {
    $('.top-item button').trigger('click');
});

在html中为span添加隐形按钮

3 个答案: