关闭 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')
})