Question

我知道在论坛上还有其他问题，但我似乎无法让这对我有用，所以我想我只是开始自己的。我想在用户点击我页面上的链接的任何地方显示div。 HTML就像这样;

<div class="DetailHeaderBar Expanded">
<span class="imgContainer"></span>
<span>John Smith</span>
<img class="TradeDetailsLink" alt="v" src="/Applications/Images/Icons/action_arrow.gif">
<a class="TradeDetailsLink" id="DetailsLink" href="#">Trade Details</a>
</div>

<div id="tradeDetailsSelector" class="ContextMenuPanel" style="position: absolute; display:none;">
    <div id="AvailableMoneyItem" class="ContextMenuItem"><a href="#" onclick="javascript:popupAvailableMoney(); return false;">View Available NFS Money</a></div>
    <div id="OpenOrdersItem" class="ContextMenuItem"><a href="#" onclick="javascript:redirectToTradeCentral(); return false;">View Open Orders</a></div>
    <div id="LockCashBufferItem" class="ContextMenuItem"><a href="#" onclick="javascript:redirectToModelManagement(); return false;">Add/Edit Locks or Cash Buffer</a></div>
</div>

将Jquery放在document.ready（）函数中。我只想在点击时直接在“交易详细信息”链接下显示TradeDetailsSelector div。这段代码是从一个据说完美无缺的帖子修改过的，但不适合我。

$("document").ready(function(){
$('div#DetailsLink').bind('click',function(event){
$('#tradeDetailsSelector').css('left',event.pageX);
$('#tradeDetailsSelector').css('top',event.pageY);
$('#tradeDetailsSelector').css('display','inline');
$("#tradeDetailsSelector").css("position","absolute");

});
})

任何人都可以给我的任何帮助都会很棒，现在一切都没有发生，IE中的开发者工具在控制台中没有显示任何错误，所以我不知道。谢谢， NickG

Answer 1

<强> Working Demo

我从.bind更改为.on()，您也可以使用.click()。我建议在CSS文件中使用内联CSS，就像我发布的演示一样。我还删除了div因为链接不是div。无论如何，如果您拥有唯一的ID，则不需要div或在此情况下a。

这是我改变它使它工作的原因：

 $('#DetailsLink').on('click', function (event) {

整个代码：

$("document").ready(function () {
    $('#DetailsLink').on('click', function (event) {
        $('#tradeDetailsSelector').css('left', event.pageX);
        $('#tradeDetailsSelector').css('top', event.pageY + 10);
        $('#tradeDetailsSelector').css('display', 'inline');
        $("#tradeDetailsSelector").css("position", "absolute");

    });
})

显示相对于链接的Div单击jQuery

1 个答案: