Javascript 相对于触发器定位隐藏/显示div

我正在努力找到正确的Jquery来显示/隐藏与触发器按钮平行高度的div。我试图将show/hide div向右偏移，但由于脚注显示在不同的左/右位置，因此每个脚注都会有所不同。相反，我需要将div放置在右侧另一个div的内部

我希望在一些文本中添加超链接的脚注，这样读者就不必搜索脚注，也不会被太多的文本淹没。我希望一次打开多个脚注，但如果需要一次打开一个脚注才能正确显示，那就这样吧

编辑：

@rohan kumar帮助编写了此代码

$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});

因此，情况是这样的：

然而，我的主要问题仍然是——如何使脚注显示在与触发器相同的高度？这些将是一段很长的文本，我希望脚注显示在与相应标记相同的高度。如何使[2]显示在页面的较低位置？

试试这个

HTML

<div class="wrapp">
    <div class="content" style="float:left;">
        <div> Lorem ipsum (<a class="a_footnote" href='javascript:;' data-divid="footnote1">[1]</a>).</div>
    </div>
    <div class="footnotes" style="float:right">
        <div id="footnote1">1. Foo Bar</div>
    </div>
        <div class="clear"></div>
</div>

脚本

$('.a_footnote').on('click',function(e){
    e.preventDefault();
    var divId=$(this).data('divid');
    console.log(divId);
    $('#'+divId).toggle();
});

如果您希望

div.footnotes

最初是

隐藏的

，那么您需要添加一个

css

类

div.footnotes {display:none;}

拉小提琴

试试这个

HTML

<div class="wrapp">
    <div class="content" style="float:left;">
        <div> Lorem ipsum (<a class="a_footnote" href='javascript:;' data-divid="footnote1">[1]</a>).</div>
    </div>
    <div class="footnotes" style="float:right">
        <div id="footnote1">1. Foo Bar</div>
    </div>
        <div class="clear"></div>
</div>

脚本

$('.a_footnote').on('click',function(e){
    e.preventDefault();
    var divId=$(this).data('divid');
    console.log(divId);
    $('#'+divId).toggle();
});

如果您希望

div.footnotes

最初是

隐藏的

，那么您需要添加一个

css

类

div.footnotes {display:none;}

---

Fiddle

您不需要浮动，我假设您希望此文本在您的段落中内联显示。您需要绝对定位注释，然后根据单击的元素位置+元素宽度+偏移量设置顶部/左侧

HTML:

<div class="content">
    <p> Lorem ipsum (<a href="#" class="footnote" id="footnote1">[1]</a>).</p>
    <p> Lorem ipsum (<a href="#" class="footnote" id="footnote2">[2]</a>).</p>
</div>

<div class="footnotes">
    <div class="footnote1">1. Foo Bar</div>
    <div class="footnote2">2. Foo Bar</div>
</div>

JavaScript

$('.footnote').on('click', function(e) {
    e.preventDefault();
    var $note = $('.' + this.id);
    var $position = $(this).position();
    $('.footnotes > div').hide();
    $note.css({
        top : $position.top,
        left: $position.left + $(this).width() + 5
    }).show(); })

$('.a_footnote').on('click',function(e){
    e.preventDefault();
    var divId=$(this).data('divid');
    var height = $(this).position().top;
    console.log(divId);
    $(".footnotes div").hide();
    $('#'+divId).toggle().css("top", height - 10);
});

---

您不需要浮动，我假设您希望此文本在您的段落中内联显示。您需要绝对定位注释，然后根据单击的元素位置+元素宽度+偏移量设置顶部/左侧

HTML:

<div class="content">
    <p> Lorem ipsum (<a href="#" class="footnote" id="footnote1">[1]</a>).</p>
    <p> Lorem ipsum (<a href="#" class="footnote" id="footnote2">[2]</a>).</p>
</div>

<div class="footnotes">
    <div class="footnote1">1. Foo Bar</div>
    <div class="footnote2">2. Foo Bar</div>
</div>

JavaScript

$('.footnote').on('click', function(e) {
    e.preventDefault();
    var $note = $('.' + this.id);
    var $position = $(this).position();
    $('.footnotes > div').hide();
    $note.css({
        top : $position.top,
        left: $position.left + $(this).width() + 5
    }).show(); })

$('.a_footnote').on('click',function(e){
    e.preventDefault();
    var divId=$(this).data('divid');
    var height = $(this).position().top;
    console.log(divId);
    $(".footnotes div").hide();
    $('#'+divId).toggle().css("top", height - 10);
});

---

因此，基本上，将其他答案结合起来就可以得出这个结论

Html与小提琴中的内容相同

CSS

.wrapp{
    border:1px solid red;
    height:50px;
}
.clear{
    clear:both;
}

.footnotes > div { display: none; position: absolute; border: solid 1px red; }

.wrapp{
    border:1px solid red;
    height:100%;
}

.clear{
    clear:both;
}

.footnotes div {
    position: relative;
    display: none;
}

JavaScript

$('.footnote').on('click', function(e) {
    e.preventDefault();
    var $note = $('.' + this.id);
    var $position = $(this).position();
    $('.footnotes > div').hide();
    $note.css({
        top : $position.top,
        left: $position.left + $(this).width() + 5
    }).show(); })

$('.a_footnote').on('click',function(e){
    e.preventDefault();
    var divId=$(this).data('divid');
    var height = $(this).position().top;
    console.log(divId);
    $(".footnotes div").hide();
    $('#'+divId).toggle().css("top", height - 10);
});

---

因此，基本上，将其他答案结合起来就可以得出这个结论

Html与小提琴中的内容相同

CSS

.wrapp{
    border:1px solid red;
    height:50px;
}
.clear{
    clear:both;
}

.footnotes > div { display: none; position: absolute; border: solid 1px red; }

.wrapp{
    border:1px solid red;
    height:100%;
}

.clear{
    clear:both;
}

.footnotes div {
    position: relative;
    display: none;
}

JavaScript

$('.footnote').on('click', function(e) {
    e.preventDefault();
    var $note = $('.' + this.id);
    var $position = $(this).position();
    $('.footnotes > div').hide();
    $note.css({
        top : $position.top,
        left: $position.left + $(this).width() + 5
    }).show(); })

$('.a_footnote').on('click',function(e){
    e.preventDefault();
    var divId=$(this).data('divid');
    var height = $(this).position().top;
    console.log(divId);
    $(".footnotes div").hide();
    $('#'+divId).toggle().css("top", height - 10);
});

---

---

单击

a#footnote1

是否要隐藏

div#footnote1

。对吗？$（this）.closest（'.content'）.next（'.footnotes'）.toggle（）；您的标记不正确，您已经指定了两次

id=“footnote1”

，这是不正确的，因为id需要是唯一的。如果你开始变得复杂，那么值得考虑一个插件，它可以处理这样的情况：链接位于右侧视口的最边缘，否则将被隐藏。单击

a#footnote1

是否要隐藏

div#footnote1

。对吗？$（this）.closest（'.content'）.next（'.footnotes'）.toggle（）；您的标记不正确，您已经指定了两次

id=“footnote1”

，这是不正确的，因为id必须是唯一的。如果你开始变得复杂，那么值得考虑一个插件，它可以处理这样的情况，比如链接位于右侧视口的边缘，否则会隐藏起来。谢谢你的回答。我希望在加载时隐藏脚注，然后显示在与触发器相同的高度。这段代码将脚注放在脚注div的顶部，而不管触发器的位置。@user2429096检查上面的答案我对它做了更改。谢谢你的回答。我希望在加载时隐藏脚注，然后显示在与触发器相同的高度。这段代码将脚注放在脚注div的顶部，而不考虑触发器的位置。@user2429096检查上面的答案我已经对其进行了更改。实际上，我更希望脚注不以内联方式显示，而是沿屏幕右侧以div显示。与原始链接处于同一级别？让我知道，我会更新我的代码，这只是css发布的问题。试试这个：再次单击将隐藏脚注，css控件颜色/宽度etcI实际上更希望脚注不以内联方式显示，而是沿屏幕右侧以div显示。与原始链接处于同一级别？让我知道，我会更新我的代码，这只是css发布的问题。试试这个：再次单击将隐藏脚注，css控制颜色/宽度等。非常感谢。我不确定我在做什么，但我不能得到正确的定位。这太棒了！请注意，如果您希望在单击其他脚注时使脚注保持不变，则需要重新计算其高度。对于其他将使用此选项的人，请注意，您需要将高度偏移数（-10）更改为“wrapp”开头上方的像素数我花了很长时间才注意到并解决了这个问题！再次感谢你的帮助！对非常感谢。我不确定我在做什么，但我不能得到正确的定位。这太棒了！请注意，如果您希望在单击其他脚注时使脚注保持不变，则需要重新计算其高度。对于其他将使用此选项的人，请注意，您需要将高度偏移数（-10）更改为“wrapp”开头上方的像素数我花了很长时间才注意到并解决了这个问题！再次感谢你的帮助！