關閉 div 會向上移動頁面

Question

我正在制作一個頁面，您可以在其中打開和關閉描述。 該頁面在 firefox 上完美運行，但在 Chrome 等其他瀏覽器上，當您打開和關閉其他 div 時，該頁面似乎為 go。

編輯：當我關閉另一個菜單下的菜單時，頁面會上升。 但不是相反。 這是一個鏈接，因此您可以查看 chrome 發生了什么： https://imgur.com/a/4zgrzc0

我想問題是$(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); 我怎樣才能避免這種情況？ 非常感謝。

 $(document).ready(function(){ $(".exposition").on('click',function(){ var hello = $(this).attr('data-id'); $('.photos-evenements').hide(); $('[id='+ hello + ']').show(); }); }); $( document ).ready(function(open) { $('.sub-menu ul').hide(); $('.sub-menu a').click(function () { $(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one $(this).parent('.sub-menu').children('ul').slideToggle(200); }); $('.sub-menu a').click(function(open) { open.preventDefault(); }); });

 .photos-evenements{ display:none; max-width: 100%; max-height: 90vh; }.exemple { height:100vh; background-color:lavender; }

 <div class="exemple">hi</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="menu"> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId1">1</a> <ul> <li> When opened, i'm a description, I'm not supposed to move the page when opened or closed. </li> </ul> </li> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId2">2</a> <ul> <li> I'm supposed to close 1 and don't move the page up </li> </ul> </li> </ul> <div class="exposition"> <div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId1"/></div> <div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div> <div class="photos-ind"><img id="divId1" class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div> </div> <div class="exposition"> <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/Performances%20OK.jpg" data-id="divId2"/></div> <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_3.png" data-id="divId1"/></div> <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/333_1.png" data-id="divId1"/></div> </div> </div>

Answer 1

我相信您所看到的是來自 Chrome 的激進滾動錨定。 由於某種原因，Chrome 將滾動錨定在您單擊的鏈接上，而 Firefox 將其錨定在其他一些元素上，可能是容器或前面的 div。

至少對我來說，尚不清楚為什么行為會有所不同，或者哪個是“正確的”。 在任何情況下，您都應該能夠通過簡單地禁用菜單容器內的滾動錨定來解決您的問題。 為此，我們可以在要禁用滾動錨定的元素上使用overflow-anchor屬性。

在您給出的示例中，我們只需將以下代碼添加到 CSS

.sub-menu{
   overflow-anchor:none
}

這應該可以解決問題。

我在下面的代碼段中編輯了您的示例以包含此內容（我還稍微整理了代碼以使其更清晰）。 我已經在 Firefox 和 Chrome 中對此進行了測試，頁面的跳轉似乎消失了。

顯然，您必須更改為具有不同 class 名稱的不同腳本設置的overflow-anchor:none屬性。 一種方法是通過將其設置在正文上來禁用整個文檔的滾動錨定。

body{
   overflow-anchor:none
}

但是請注意，引入滾動錨定是為了抵消用戶當前正在查看的內容被文檔其他地方的更改意外移動的非常破壞性的體驗。 如果可能，最好只在 select 區域禁用它。

 $(document).ready(function(){ $(".exposition").on('click',function(){ var hello = $(this).attr('data-id'); $('.photos-evenements').hide(); $('[id='+ hello + ']').show(); }); }); $( document ).ready(function(open) { $('.sub-menu ul').hide(); $('.sub-menu a').click(function () { $(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one $(this).parent('.sub-menu').children('ul').slideToggle(200); }); $('.sub-menu a').click(function(open) { open.preventDefault(); }); });

 .example { height:100vh; background-color:lavender; }.sub-menu { overflow-anchor:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="example">Space above</div> <ul class="menu"> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId1">1</a> <ul> <li> When opened, i'm a description, I'm not supposed to move the page when opened or closed. </li> </ul> </li> <li class='sub-menu'> <a href='#' class="exposition" data-id="divId2">2</a> <ul> <li> I'm supposed to close 1 and don't move the page up </li> </ul> </li> </ul> <div class="example">Space below</div>

Answer 2

修改后的答案

我認為這可能是該頁面的一個簡單的最小高度問題。 通過為隱藏內容預留空間，可以避免跳轉

我制作了一個代碼框來演示這個問題，並且可以調整列表上的高度 - 當你高興時刪除邊框。

https://codesandbox.io/s/sleepy-currying-6vtsy?file=/index.html:467-489

Answer 3

不完全確定您要做什么，但您可以嘗試以下操作：

$(document).on('click', '.sub-menu a', function (e) {
     e.preventDefault()
     e.stopPropagation()

     $(this).parents('.sub-menu').siblings().find('ul').slideUp('fast');
     $(this).parents('.sub-menu').children('ul').slideToggle(200);
  });

最好將事件綁定到文檔而不是特定元素，以防您將來可能最終通過 AJAX 加載數據。

無論如何，我通常通過在你的 case.sub-menu ul 中為元素定義 CSS 來實現你正在尋找的東西：

.sub-menu ul{
   max-height:0vh; // To hide sub-menu <ul> contents
   overflow:hidden;
   transition:500ms ease; // For fancy smooth opening and closing  [1/2]
   transition:max-height 500ms ease; // Alternative, more specific [2/2]
}

.sub-menu.active ul{
   max-height:100vh;  // or any height you expect it to never exceed.
}

然后 - 使用 jQuery - 您可以執行以下操作：

$(document).on('click', '.sub-menu a', function(e){
  e.preventDefault();
  $(this).parents('.sub-menu').addClass('active')
  $(this).parents('.sub-menu').siblings().removeClass('active')
})