Пазіцыянаванне схаваць/паказаць DIV адносна запуску

Я з усіх сіл, каб знайсці правільны Jquery, каб паказаць/схаваць DIV на вышыні, якая раўналежная гашэтку. Я паспрабаваў кампенсаваць паказаць/схаваць DIV направа, а таму, што зноскі з'яўляюцца ў розным левым/правым пазіцыянаванні, кожны з іх будзе адрознівацца. Замест гэтага мне трэба будзе змясціць дзівы ўнутры іншага DIV ўздоўж правага боку.

Мая надзея складаецца ў тым, каб дадаць гіперспасылка зносак у нейкі тэкст, так што чытачы не павінны шукаць зноскі, але і не будуць перагружаныя занадта шмат тэксту. Я хацеў бы мець больш за адну зноскі адкрытай у той час, але калі ён павінен быць адзін у той час, каб правільна адлюстраваць, так і будзе.

EDIT:

@ Рохан-Кумар дапамог з гэтым кодам

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

So here's the way it stands: http://jsfiddle.net/6n28t/21/

Аднак, мая асноўная праблема застаецца - як я магу зрабіць зноску з'яўляцца на тую ж вышыню, як спускавы кручок? Яны будуць доўгія кавалкі тэксту, і я хачу зноскі з'яўляцца на той жа вышыні, адпаведнай адзнакi. Як я магу з [2] з'яўляюцца далей уніз на старонцы?

1
Вы хочаце, каб схаваць DIV # сноска1 пры націску на а # сноска1 . Дакладна?
дададзена аўтар Rohan Kumar, крыніца
.. $ (Гэта) .closest ( ». Змест ') наступны ('. Зносак) пераключэнне ();
дададзена аўтар Orangepill, крыніца
.. $ (Гэта) .closest ( ». Змест ') наступны ('. Зносак) пераключэнне ();
дададзена аўтар Orangepill, крыніца
.. $ (Гэта) .closest ( ». Змест ') наступны ('. Зносак) пераключэнне ();
дададзена аўтар Orangepill, крыніца
.. $ (Гэта) .closest ( ». Змест ') наступны ('. Зносак) пераключэнне ();
дададзена аўтар Orangepill, крыніца
Калі вы пачнеце атрымліваць у складанасці, то варта разгледзець убудова як stevenbenner.github.io/jquery-powertip , які будзе апрацоўваць выпадкі, як, калі спасылка на самым краі правых відавы і ў адваротным выпадку будзе скрыты
дададзена аўтар jammykam, крыніца
Калі вы пачнеце атрымліваць у складанасці, то варта разгледзець убудова як stevenbenner.github.io/jquery-powertip , які будзе апрацоўваць выпадкі, як, калі спасылка на самым краі правых відавы і ў адваротным выпадку будзе скрыты
дададзена аўтар jammykam, крыніца
Калі вы пачнеце атрымліваць у складанасці, то варта разгледзець убудова як stevenbenner.github.io/jquery-powertip , які будзе апрацоўваць выпадкі, як, калі спасылка на самым краі правых відавы і ў адваротным выпадку будзе скрыты
дададзена аўтар jammykam, крыніца
Калі вы пачнеце атрымліваць у складанасці, то варта разгледзець убудова як stevenbenner.github.io/jquery-powertip , які будзе апрацоўваць выпадкі, як, калі спасылка на самым краі правых відавы і ў адваротным выпадку будзе скрыты
дададзена аўтар jammykam, крыніца
Ваша разметка няправільная, вы паказалі Id = «сноска1» двойчы, што з'яўляецца няправільным, паколькі ідэнтыфікатары павінны быць унікальнымі.
дададзена аўтар jammykam, крыніца
Ваша разметка няправільная, вы паказалі Id = «сноска1» двойчы, што з'яўляецца няправільным, паколькі ідэнтыфікатары павінны быць унікальнымі.
дададзена аўтар jammykam, крыніца
Ваша разметка няправільная, вы паказалі Id = «сноска1» двойчы, што з'яўляецца няправільным, паколькі ідэнтыфікатары павінны быць унікальнымі.
дададзена аўтар jammykam, крыніца
Ваша разметка няправільная, вы паказалі Id = «сноска1» двойчы, што з'яўляецца няправільным, паколькі ідэнтыфікатары павінны быць унікальнымі.
дададзена аўтар jammykam, крыніца

8 адказы

So, basically combining the other answers leads to this Fiddle

Html такога ж, як тое, што вы маеце на сваёй скрыпцы.

<�Моцны> CSS

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

.clear{
    clear:both;
}

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

<�Моцны> JavaScript

$('.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);
});
1
дададзена
Звярніце ўвагу, што калі вы хочаце атрымаць у зносцы, каб застацца, калі вы націскаеце на іншую, вам неабходна пералічваць іх вышыні.
дададзена аўтар Colin DeClue, крыніца
Для любога іншага, хто будзе выкарыстоўваць гэта - Звярніце ўвагу, што вам неабходна будзе змяніць вышыню зрушэння нумар (-10 тут) да ліку пікселяў вышэй пачатку «wrapp» спраў. Мне спатрэбілася шмат часу, каб заўважыць і зразумець гэтую праблему! Яшчэ раз дзякуй за дапамогу!
дададзена аўтар user2429096, крыніца
YES. Дзякуй. Я не ўпэўнены, што я раблю, але я не мог атрымаць пазіцыянаванне правільна. Гэта выдатна!
дададзена аўтар user2429096, крыніца

Паспрабуйце гэта,

<�Моцны> HTML

<div class="wrapp">
    <div class="content" style="float:left;">
        <div> Lorem ipsum ([1]).</div>
    </div>
    <div class="footnotes" style="float:right">
        <div id="footnote1">1. Foo Bar</div>
    </div>
        <div class="clear"></div>
</div>

<�Моцны> CSS

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

<�Моцны> SCRIPT

$('.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 http://jsfiddle.net/6n28t/7

0
дададзена
@ User2429096 Праверце адказ вышэй я зрабіў змены ў ёй.
дададзена аўтар Rohan Kumar, крыніца
Дзякуй за ваш адказ. Я хачу мець зноскі, схаваныя пад нагрузку, а затым з'яўляецца на тую ж вышыню, што і спускавы кручок. Гэты код змяшчае зноскі ў верхняй частцы DIV зносак, незалежна ад месца запуску.
дададзена аўтар user2429096, крыніца

Паспрабуйце гэта,

<�Моцны> HTML

<div class="wrapp">
    <div class="content" style="float:left;">
        <div> Lorem ipsum ([1]).</div>
    </div>
    <div class="footnotes" style="float:right">
        <div id="footnote1">1. Foo Bar</div>
    </div>
        <div class="clear"></div>
</div>

<�Моцны> CSS

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

<�Моцны> SCRIPT

$('.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 http://jsfiddle.net/6n28t/7

0
дададзена
@ User2429096 Праверце адказ вышэй я зрабіў змены ў ёй.
дададзена аўтар Rohan Kumar, крыніца
Дзякуй за ваш адказ. Я хачу мець зноскі, схаваныя пад нагрузку, а затым з'яўляецца на тую ж вышыню, што і спускавы кручок. Гэты код змяшчае зноскі ў верхняй частцы DIV зносак, незалежна ад месца запуску.
дададзена аўтар user2429096, крыніца

Паспрабуйце гэта,

<�Моцны> HTML

<div class="wrapp">
    <div class="content" style="float:left;">
        <div> Lorem ipsum ([1]).</div>
    </div>
    <div class="footnotes" style="float:right">
        <div id="footnote1">1. Foo Bar</div>
    </div>
        <div class="clear"></div>
</div>

<�Моцны> CSS

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

<�Моцны> SCRIPT

$('.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 http://jsfiddle.net/6n28t/7

0
дададзена
@ User2429096 Праверце адказ вышэй я зрабіў змены ў ёй.
дададзена аўтар Rohan Kumar, крыніца
Дзякуй за ваш адказ. Я хачу мець зноскі, схаваныя пад нагрузку, а затым з'яўляецца на тую ж вышыню, што і спускавы кручок. Гэты код змяшчае зноскі ў верхняй частцы DIV зносак, незалежна ад месца запуску.
дададзена аўтар user2429096, крыніца

Паспрабуйце гэта,

<�Моцны> HTML

<div class="wrapp">
    <div class="content" style="float:left;">
        <div> Lorem ipsum ([1]).</div>
    </div>
    <div class="footnotes" style="float:right">
        <div id="footnote1">1. Foo Bar</div>
    </div>
        <div class="clear"></div>
</div>

<�Моцны> CSS

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

<�Моцны> SCRIPT

$('.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 http://jsfiddle.net/6n28t/7

0
дададзена
@ User2429096 Праверце адказ вышэй я зрабіў змены ў ёй.
дададзена аўтар Rohan Kumar, крыніца
Дзякуй за ваш адказ. Я хачу мець зноскі, схаваныя пад нагрузку, а затым з'яўляецца на тую ж вышыню, што і спускавы кручок. Гэты код змяшчае зноскі ў верхняй частцы DIV зносак, незалежна ад месца запуску.
дададзена аўтар user2429096, крыніца

Вам не патрэбныя паплаўкі, я мяркую, што вы хочаце, гэты тэкст з'явіцца убудаваным у абзацах. Вам трэба размясціць ноты абсалютна, а затым ўсталяваць верхні/налева ў адпаведнасці з становішчам вашага пстрыкнуць элемента + шырынёй элемента + зрушэннем.

jsFiddle Demo

<�Моцны> HTML:

<div class="content">
    
Lorem ipsum ([1]).


Lorem ipsum ([2]).

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

<�Моцны> CSS

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

<�Моцны> 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(); })
0
дададзена
На тым жа ўзроўні, што і арыгінальная спасылка? Дайце мне ведаць, і я буду абнаўляць свой код, гэта проста пытанне CSS postioning.
дададзена аўтар jammykam, крыніца
Паспрабуйце гэта: jsfiddle.net/CRkdx/5 Пстрычка схавае зноску, CSS кантралюе колер/шырыня і г.д.
дададзена аўтар jammykam, крыніца
Я на самой справе хацеў бы, што зноскі не адлюстроўваюцца рядный, але ў DIV па правай баку экрана.
дададзена аўтар user2429096, крыніца

Вам не патрэбныя паплаўкі, я мяркую, што вы хочаце, гэты тэкст з'явіцца убудаваным у абзацах. Вам трэба размясціць ноты абсалютна, а затым ўсталяваць верхні/налева ў адпаведнасці з становішчам вашага пстрыкнуць элемента + шырынёй элемента + зрушэннем.

jsFiddle Demo

<�Моцны> HTML:

<div class="content">
    
Lorem ipsum ([1]).


Lorem ipsum ([2]).

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

<�Моцны> CSS

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

<�Моцны> 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(); })
0
дададзена
На тым жа ўзроўні, што і арыгінальная спасылка? Дайце мне ведаць, і я буду абнаўляць свой код, гэта проста пытанне CSS postioning.
дададзена аўтар jammykam, крыніца
Паспрабуйце гэта: jsfiddle.net/CRkdx/5 Пстрычка схавае зноску, CSS кантралюе колер/шырыня і г.д.
дададзена аўтар jammykam, крыніца
Я на самой справе хацеў бы, што зноскі не адлюстроўваюцца рядный, але ў DIV па правай баку экрана.
дададзена аўтар user2429096, крыніца

Вам не патрэбныя паплаўкі, я мяркую, што вы хочаце, гэты тэкст з'явіцца убудаваным у абзацах. Вам трэба размясціць ноты абсалютна, а затым ўсталяваць верхні/налева ў адпаведнасці з становішчам вашага пстрыкнуць элемента + шырынёй элемента + зрушэннем.

jsFiddle Demo

<�Моцны> HTML:

<div class="content">
    
Lorem ipsum ([1]).


Lorem ipsum ([2]).

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

<�Моцны> CSS

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

<�Моцны> 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(); })
0
дададзена
На тым жа ўзроўні, што і арыгінальная спасылка? Дайце мне ведаць, і я буду абнаўляць свой код, гэта проста пытанне CSS postioning.
дададзена аўтар jammykam, крыніца
Паспрабуйце гэта: jsfiddle.net/CRkdx/5 Пстрычка схавае зноску, CSS кантралюе колер/шырыня і г.д.
дададзена аўтар jammykam, крыніца
Я на самой справе хацеў бы, што зноскі не адлюстроўваюцца рядный, але ў DIV па правай баку экрана.
дададзена аўтар user2429096, крыніца