クリックした要素の下にdivを表示右揃え

Question

私は次のとおりですthisボタンごとに異なるポップアップdivがありますが、クリックしたボタンの右側に整列させたいと思っています。 。

左変更

：btn.offset（）はどこにでも私を取得していません

を残しました。

$(document).ready(function() { 
 
    $("#button1, #button2").click(function() { 
 
    var btn = $(this); 
 
    var clickedId = $(this).attr("id"); 
 
    var clickedPopup = "_popup"; 
 
    $("#" + clickedId + clickedPopup).css({ 
 
     position: 'absolute', 
 
     top: btn.offset().top + btn.outerHeight() + 10, 
 
     left: btn.offset().left 
 
    }).slideToggle(''); 
 
    }); 
 
});

.button_div, 
 
.text_div { 
 
    position: relative; 
 
    float: right; 
 
    margin: 0 10px; 
 
} 
 

 
#button1_popup, 
 
#button2_popup { 
 
    display: none; 
 
    border: 1px solid black; 
 
    width: 220px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="text_div">div with unknown width</div> 
 
<div id="button1" class="button_div"><button id="one">One</button></div> 
 
<div id="button2" class="button_div"><button id="two">Two</button></div> 
 
<div id="button1_popup">Message with some text</div> 
 
<div id="button2_popup">Message with some text</div>

Answer 1

CSSは完璧にうまく機能する場合はJavaScriptでこれを行う必要はありません。

$(document).ready(function() { 
 
    $("#button1, #button2").click(function() { 
 
    var btn = $(this); 
 
    var clickedId = $(this).attr("id"); 
 
    var clickedPopup = "_popup"; 
 
    $("#" + clickedId + clickedPopup).slideToggle(''); 
 
    }); 
 
});

.button_div, 
 
.text_div { 
 
    position: relative; 
 
    float: right; 
 
    margin: 0 10px; 
 
} 
 

 
#button1_popup, 
 
#button2_popup { 
 
    display: none; 
 
    border: 1px solid black; 
 
    width: 220px; 
 
    height: 100px; 
 
    position:absolute; 
 
    right:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="text_div">div with unknown width</div> 
 
<div id="button1" class="button_div"> 
 
    <button id="one">One</button> 
 
    <div id="button1_popup">Message with some text</div> 
 
</div> 
 
<div id="button2" class="button_div"> 
 
    <button id="two">Two</button> 
 
    <div id="button2_popup">Message with some text</div> 
 
</div>