的jQuery如何通過其當前位置

enter image description here 的jQuery如何通過其當前位置

我想有灰綠色的右邊緣排隊與深綠色的右邊緣，以抵消2種或多個元素之間的位置。我知道元素將需要固定的位置。但我試圖弄清楚我如何獲得邊緣，然後利用它們來找到我留下的位置偏移量將移動的優勢。

最初試圖像

var parWidth = $theElement.parent().width; 
    var parLeft = $theElement.parent().position().left; 
    var moveToLeft = Math.round((parWidth - $theElement.width) - parLeft);

但其返回NaN時，發現了寬度，左右兩個父元素（深綠色）和子元素（石灰）的不是問題，我認爲它的我數學，以及我目前關於如何正確計算數學的邏輯。我這樣動態地做這個動作的原因是因爲我有多個元素共享相同的類來觸發這個事件，但是我將這個函數動態化爲觸發事件的特定元素，並且它的所有工作都可以達到點。

編輯的HTML：

<div class="button_select_header_like_thing"> 
    <div class="button_select"> 
     <ul class="button_select_toggle" id="button_groupings"> 
      <li> 
       <div class="button_select_text">Menu Text</div><div class="button_select_arrow">V</div> 
       <div style="clear:both"></div> 
      </li> 
      <li> 
       <ul class="button_select_sub" rel="hidden"> 
        <li>Text</li> 
        <li>Text</li> 
        <li>Text</li> 
        <li>Text</li> 
       </ul>  
      </li> 
     </ul> 
    </div> 
</div>

來源

2012-02-04 chris

顯示html，這將有所幫助。 – ShankarSangoli 2012-02-04 05:53:30

更改您的JS代碼：

var parWidth = $theElement.parent().width(); // width is a function, not a property 
var parLeft = $theElement.parent().position().left; 
var moveToLeft = Math.round((parWidth - $theElement.width()) - parLeft);

來源

2012-02-04 07:53:28 techfoobar

在創建下拉菜單，它總是更可取的把孩子ul元素直接子女li項目，例如：

<ul> 
    <li>Parent 1</li> 
    <li>Parent 2 
     <ul> 
      <li>Child 1</li> 
      <li>Child 2</li> 
     </ul> 
    </li> 
</ul>

這可以幫助您更容易地操縱孩子（隱藏，顯示，造型等）。在這種情況下，請查看this jsfiddle，我在您的原始代碼上構建了孩子與父母完全對齊的簡單方法，只需指定它們的寬度爲100%，即可有效擊中父母設定的邊緣。

下面就爲大家害怕的jsfiddle的代碼（HTML在前）：

<div class="button_select_header_like_thing"> 
    <div class="button_select"> 
     <ul class="button_select_toggle" id="button_groupings"> 
      <li class="li_parent"> 
       <div class="button_select_text">Menu Text</div> 
       <div class="button_select_arrow">V</div> 
       <div style="clear:both"></div> 
       <ul class="button_select_sub" rel="hidden"> 
        <li>Text</li> 
        <li>Text</li> 
        <li>Text</li> 
        <li>Text</li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

...然後CSS：

.li_parent 
{ 
    width: 200px; 
} 

.button_select_text 
{ 
    float: left; 
    width: 150px; 
    background-color: GREEN; 
} 

.button_select_arrow 
{ 
    float: left; 
    width: 50px; 
    background-color: GREEN; 
} 

.li_parent ul 
{ 
    width: 100%; 
    background-color: ORANGE; 
}

希望這有助於，甚至只是給你的東西想一想！ :)

來源

2012-02-04 08:03:42

的jQuery如何通過其當前位置

回答

相關問題