定位元素向下點擊？

我有一個絕對定位的div和一個按鈕，使用jQuery切換點擊式轉換。然而，當按鈕被點擊時，div會向下移動，我不想讓它做，我似乎無法找到是什麼原因造成的，因爲之前被定位的元素在切換時沒有移動，它以前工作得很好。定位元素向下點擊？

該問題可以通過刪除top和left CSS屬性來解決，但是div不會顯示我想要的位置。

查看JSFiddle上的示例。

$('table').hide(); 
 
$('button').click(function() { 
 
    $(this).siblings('table').toggle('show'); 
 
}); 
 
// TOGGLE ICON TRANSITION 
 
$(function() { 
 
    var icon = $('.dd-arrow'); 
 
    var button = $('.view-products'); 
 
    button.on('click', function() { 
 
    $(this).closest('div').find('.dd-arrow').toggleClass('active').css('display', 'block'); 
 
    $(this).siblings('img').fadeToggle('fast'); 
 
    }); 
 
});

.prices { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.prices .dd-arrow { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transition: all .5s ease-in-out 0s; 
 
} 
 

 
.prices .dd-arrow img { 
 
    width: 20px; 
 
} 
 

 
.prices .dd-arrow.active { 
 
    transform: rotate(360deg); 
 
}

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

 
<div class="prices"> 
 
    <button class="view-products" onclick="swapText()">View Products:</button> 
 
    <div class="dd-arrow"><img src="img/drop-down-arrow.svg" /></div> 
 
    <table> 
 
    <th>number</th> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2017-04-12 Muzzleeeehso

做你嘗試過頂：0;左：0？或頂部：0;左：50％ – Roy

試試這個https://jsfiddle.net/54hr2j6h/ –

請不要忽視小提琴鏈接的規則 - 我想這就是爲什麼你已經突出顯示謝謝代碼 – Pete

請檢查它是否有用。謝謝。

$('table').hide(); 
 
$('button').click(function() { 
 
    $(this).siblings('table').toggle('show'); 
 
}); 
 
// TOGGLE ICON TRANSITION 
 
$(function() { 
 
    var icon = $('.dd-arrow'); 
 
    var button = $('.view-products'); 
 
    button.on('click', function() { 
 
    $(this).closest('div').find('.dd-arrow').toggleClass('active').css('display', 'block'); 
 
    $(this).siblings('img').fadeToggle('fast'); 
 
    }); 
 
});

.prices { 
 
     position: relative; 
 
     display: inline-block; 
 

 
     .dd-arrow { 
 
      position: absolute; 
 
      top: 0%; 
 
      left: 0%; 
 
      margin-left: 130px; 
 
      margin-top: 30px; 
 
      transition: all .5s ease-in-out 0s; 
 
      img { 
 
       width: 50px; 
 
      } 
 
     } 
 
     .dd-arrow.active { 
 
      transform: rotate(360deg); 
 
     } 
 

 
}

<div class="prices"> 
 
    <button class="view-products" onclick="swapText()">View Products:</button> 
 
    <div class="dd-arrow"><img src="https://cdn.pixabay.com/photo/2017/04/06/16/57/auto-2208807_960_720.png"/></div>    
 
    <table> 
 
    <th>number</th> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2017-04-12 10:50:59 dekts

謝謝先生。試驗**保證金**似乎工作。 – Muzzleeeehso

請注意，如果有幫助。謝謝 – dekts

有一些信息：你把你的分度百分比。所以它是父div的百分比。在你的cas中，父div是<div class="prices">。問題是，由於表格顯示，當您單擊該按鈕時，此div大小會增加。因此頁面的高度比起初頁面大50％。

有一個可行的解決方案：

.prices { 
    position: relative; 
    display: inline-block; 

    .dd-arrow { 
     position: absolute; 
     left: 50%; 
     transition: all .5s ease-in-out 0s; 
     img { 
      width: 20px; 
     } 
    } 
    .dd-arrow.active { 
     transform: rotate(360deg); 
    }

}

來源

2017-04-12 10:38:38 abraham63

定位元素向下點擊？

回答

相關問題