在單擊的元素對齊右側顯示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

不需要做這在JavaScript時CSS工作得很好。我建議嵌套隱藏層的.button_div S的內部，並position荷蘭國際集團他們absolute LY與right:0如下：

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