Zeigen Sie div unter angeklickt Element ausgerichtet rechts

Question

Ich folge this Ich habe verschiedene Popup Divs für jede Schaltfläche, aber ich möchte sie auf der rechten Seite der angeklickt Schaltfläche ausgerichtet werden.

die

links ändern. Btn.offset()

links

mich nicht überall bekommen.

$(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

Keine Notwendigkeit, dies in Javascript zu tun, wenn CSS sehr gut funktioniert. Ich schlage vor, nisten die versteckten Divs innerhalb der .button_div s, und position sie absolute ly mit right:0 ing wie folgt:

$(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>