单击打开和关闭 div

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

Open and close divs on click

html

javascript

image

show