1

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

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 部分都返回到隐藏状态，从而重置页面的部分。

提前致谢。

4

1 回答 1

0

搞清楚这个了吗？

$('.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/

于 2018-05-29T06:14:08.000 回答