关闭 div 会向上移动页面

Question

我正在制作一个页面，您可以在其中打开和关闭描述。 该页面在 Firefox 上完美运行，但在 Chrome 等其他浏览器上，当您打开和关闭其他 div 时，该页面似乎会上升。

编辑：当我关闭另一个菜单下的菜单时，页面会上升。但不是相反。 这是一个链接，您可以查看 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

修改后的答案

我认为这可能是该页面的一个简单的最小高度问题。通过为隐藏内容预留空间，可以避免跳转

我制作了一个代码框来演示这个问题，并且可以调整列表上的高度 - 开心时移除边框。

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

Answer 2

不完全确定您要做什么，但您可以尝试以下方法：

$(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 加载数据。

无论如何，我通常通过为元素定义 CSS（在您的情况下为 .sub-menu ul）来实现您正在寻找的东西：

.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')
})

Answer 3

我相信您所看到的是来自 Chrome 的攻击性 scroll anchoring。出于某种原因，Chrome 将滚动锚定在您单击的链接上，而 Firefox 将其锚定在其他元素上，可能是容器或前面的 div。

至少对我来说，尚不清楚为什么行为会有所不同，或者哪个是“正确的”。在任何情况下，您都应该能够通过简单地禁用菜单容器内的滚动锚定来解决您的问题。为此，我们可以在要禁用滚动锚定的元素上使用overflow-anchor 属性。

在您给出的示例中，我们只需将以下代码添加到 CSS 中

.sub-menu{
   overflow-anchor:none
}

这应该可以解决问题。

我在下面的 sn-p 中编辑了您的示例以包含此内容（我还稍微整理了代码以使其更清晰）。我在 Firefox 和 Chrome 中都测试过，页面的跳转似乎消失了。

显然，对于具有不同类名的不同脚本，您必须更改您设置的 overflow-anchor:none 属性。一种方法是通过将其设置在正文上来禁用整个文档的滚动锚定。

body{
   overflow-anchor:none
}

但是请注意，引入滚动锚定是为了抵消用户当前正在查看的内容因文档其他位置的更改而意外移动的非常破坏性的体验。如果可能，最好只在选定区域禁用它。

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