在手风琴菜单中保留打开元素时，jQuery幻灯片关闭

Question

好的，所以我有以下代码对网页上的某些项目产生“手风琴”效果：

jQuery(document).ready(function() {
  $('.cont-wrap').hide();
  $('.cont').on('mouseenter', '.cont-title', function(){
    $(this).next().slideDown(300).siblings('.cont-wrap').slideUp(300);
  });
  $('.main').on('mouseleave', '.cont-wrap, cont-title', function(){
    $(this('.cont-wrap')).slideUp(300);
  });
});

我试图用mouseleave部分完成的是当鼠标离开主div时所有的cont-wrap部分返回隐藏状态，从而重置页面部分。

提前致谢。

Answer 1

搞清楚了吗？

$('.cont-wrap').hide();
$('.cont').on('mouseenter', '.cont-title', function() {
  $('.cont').not($(this).parent()).addClass('minimize');
  $(this).parent().addClass('maximize');
  $(this).next().slideDown(300).siblings('.cont-wrap').slideUp(300);
})
$('body').on('mouseleave', '.cont', function() {
  $('.cont-wrap').slideUp(300);
})

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cont {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
  width: 100%;
  transition: all 0.3s linear;
}
.cont-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  padding: 2px;
  color: hsla(0, 0%, 50%, 1);
  font-weight: bold;
  background-color: hsla(0, 0%, 10%, 1);
  border-style: solid;
  border-color: hsla(0, 0%, 80%, 0.1); 
  border-width: 1px 0;
}
.cont-wrap {
  overflow: hidden;
  opacity: 0;
}
.cont.maximize {
  flex: 2;
}
.cont.minimize {
  flex: 1;
}
.cont.maximize .cont-title {
  font-weight: normal;
}
.cont.maximize .cont-wrap {
  height: 100%;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <div class="cont-title">Pirate Ipsum</div>
  <div class="cont-wrap">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</div>
</div>
<div class="cont">
  <div class="cont-title">Pirate Ipsum</div>
  <div class="cont-wrap">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</div>
</div>
<div class="cont">
  <div class="cont-title">Pirate Ipsum</div>
  <div class="cont-wrap">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</div>
</div>
<div class="cont">
  <div class="cont-title">Pirate Ipsum</div>
  <div class="cont-wrap">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</div>
</div>
<div class="cont">
  <div class="cont-title">Pirate Ipsum</div>
  <div class="cont-wrap">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</div>
</div>
<div class="cont">
  <div class="cont-title">Pirate Ipsum</div>
  <div class="cont-wrap">Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</div>
</div>

<强>拨弄

https://jsfiddle.net/Hastig/ew8bysy8/