Question

Hello I am currently working a notification dropdown menu and each <li> contains a link or an <a> tag.

I want to make something like facebook's notification内创建可点击按钮或链接。

现在问题是我想在<a>标记内放一个小按钮或一个可点击的元素。或者只是我想在<a>代码中嵌套<a>。在google上搜索了一些答案之后，我发现用纯HTML来嵌套它是不可能的。

有人建议将<a>放在<div>的 onclick 事件中。但它并不像this那样使链接可以右键单击。

那么如何在内部创建一个可右键单击的链接，它有一个可点击的按钮或一个链接？

谢谢。

修改：经过几次搜索，我到目前为止已经进入了这个代码。

HTML：

<li class="dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button">Notification</a>
    <ul class="dropdown-menu">
        <li>
            <div class="notif-box">
                <a href='#' onclick='testfunction();' style="font-size: 50; float: right; text-decoration: none;">X</a>
                <a href="index.php" id='notif-link-body'></a>
                <b>Notification title here</b>
                <p>Content body here</p>
            </div>    
            </a>
        </li>
    </ul>
</li>

JS

$(".notif-box").click(function() {
    var x = $("#notif-link-body").attr("href");
    window.location = x; 
    return false;
});

function testfunction(){
    alert("It works!");
    return false;
}

CSS

.notif-box {
    width: 250px;
    cursor: pointer;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.notif-box:hover,
.notif-box:focus {
    color: #262626 !important;
    text-decoration: none !important;
    background-color: #f5f5f5 !important;
}

唯一的问题是每当我点击＆＃34; x＆＃34;按钮在警报弹出后仍将我重定向到index.php。

Answer 1

如果您使用的是Bootstrap，请尝试过：

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

参考：http://getbootstrap.com/javascript/#dropdowns

Answer 2

我终于弄明白了。我制作了这样的结构......

<a href="index.php" style="display: block;">//Parent link
 <span class="x-button" style="align: right;">X</span>//The button inside the parent link
 Some text here...
</a>

我所做的是将<a> 作为父元素，因此用户仍然可以右键单击并执行类似打开链接的操作新标签。

因此，为了防止浏览器在用户点击子元素时触发父元素，我使用jquery hover()和bind()来在孩子徘徊时禁用父链接，然后重新启动 - 在鼠标叶子上启用它。

$(".x-button").hover(function(){//On mouse enter
    var parent = $(this).closest('a');
    parent.bind('click', false);//Disable the parent
}, function(){//On mouse leave
    var parent = $(this).closest('a');
    parent.unbind('click', false);//Re-enable the parent
    parent.blur();//Unfocus the element
});

$(".x-button").click(function() {
    //Do something on click
});

如何在<a> tag and still be right-clickable?

2 个答案: