我在做一个页面，你可以打开和关闭描述。 这个页面在firefox上运行得很好，但是在Chrome等其他浏览器上，当你打开和关闭其他div时，这个页面似乎会向上。
编辑:当我关闭一个菜单下的另一个菜单时，页面会向上。 但不是反过来。
我想问题是$(this).parent('.sub-menu').siblings().find('ul').slideup('fast')；我该如何避免这种情况呢？ 多谢。
null
$(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>null
这样做
发件人:
$('.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();
});
致:
$('.sub-menu ul').hide();
$('.sub-menu a').click(function (evt) {
evt.preventDefault();
$(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one
$(this).parent('.sub-menu').children('ul').slideToggle(200);
});
此代码不是必需的，可能会导致竞争条件，因为PreventDefault发生click事件。
$('.sub-menu a').click(function(open) {
open.preventDefault();
});
让我们知道它是怎么运作的。
不完全确定您要做什么，但您可以尝试以下操作:
$(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来实现您所期望的目标，在您的例子中，子菜单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(){
$(this).parents('.sub-menu').addClass('active')
$(this).parents('.sub-menu').siblings().removeClass('active')
})
