Question

因此，我制作了此脚本，用于打开子菜单并同时显示图像。这工作得很好，但是当您单击另一个时，我正在尝试关闭上一个。那可能吗？换句话说，您不能同时打开两个菜单。感谢您的宝贵帮助。

这是我的代码：

$(document).ready(function(){
  $(".exposition").on('click',function(){
var hello = $(this).attr('data-id');
$('.photos-evenements').hide();
$('[id='+ hello + ']').show();
  });
});

$(document).ready(function(open) {
  
  console.log("ping");
  
  $('.sub-menu ul').hide();
  $('.sub-menu a').click(function () {
$(this).parent('.sub-menu').children('ul').slideToggle(200);
  });
  
  console.log("pong");
  
  $('.sub-menu a').click(function(open) {
open.preventDefault();
  });
  
});

});

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

<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>
    1 openinng (should also close 2 if its open and hide its images)
  </li>
</ul>
  </li>
  <li class='sub-menu'> <a href='#' class="exposition"  data-id="divId2">2</a>
<ul>
  <li>
    2 opening (should also close 1 if its open and hide its images)
  </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/FESTIVAL_JEUNE_VIDEO_1.png" data-id="divId2"/></div>
  <div class="photos-ind"><img id="divId2" class="photos-evenements" src="http://follebeton.com/img/FESTIVAL_JEUNE_VIDEO_4.png" data-id="divId1"/></div>
</div>

Answer 1

您需要添加此行


$(this).parent('.sub-menu').siblings().find('ul').slideUp('fast'); // to hide all ul expect this one

之前

$(this).parent('.sub-menu').children('ul').slideToggle(200);

单击可打开和关闭div

1 个答案: