javascript - 当另一个 div 向下滑动时，我如何才能向上滑动一个 div

Question

我想要如果我单击一个显示另一个 DIV 的 DIV，但另一个 div 需要关闭。我尝试了一些if陈述，但我以前从未使用过

$(".hiddenweb").on("click", function() {
  $(".websitehulp").slideDown("900"), 100;
  $(".emailhulp").slideUp("900"), 100;
  $(".hostinghelp").slideUp("900"), 100;
  $(".onderhoudhelp").slideUp("900"), 100;
});

$(".emaillekker").on("click", function() {
  $(".emailhulp").slideDown("900"), 100;
  $(".websitehulp").slideUp("900"), 100;
  $(".hostinghelp").slideUp("900"), 100;
  $(".onderhoudhelp").slideUp("900"), 100;
});

$(".hostinglekker").on("click", function() {
  $(".hostinghelp").slideDown("900"), 100;
  $(".websitehulp").slideUp("900"), 100;
  $(".emailhulp").slideUp("900"), 100;
  $(".onderhoudhelp").slideUp("900"), 100;
});

$(".onderhoudlekker").on("click", function() {
  $(".onderhoudhelp").slideDown("900"), 100;
  $(".hostinghelp").slideUp("900"), 100;
  $(".emailhulp").slideUp("900"), 100;
  $(".websitehulp").slideUp("900"), 100;
});

我预计延迟足以让 div 在另一个 div 打开之前等待它关闭

标签： javascriptjqueryhtml

Answer 1

看起来您正在寻找类似acccordion- 的组件：

function AccordionCtrl() {
  const item = jQuery(this);
  const isOpen = item.hasClass('is-open');

  if (isOpen) {
    item.removeClass('is-open');
    return;
  }
  
  item.siblings().each(
    (i, sibling) => jQuery(sibling).removeClass('is-open'),
  );

  return item.addClass('is-open');
}

jQuery('.accordion').on('click', '.accordion-item', AccordionCtrl);

.accordion {
  display: flex;
  flex-wrap: wrap;
}

.accordion-item {
  flex: 1 0 100%;
  min-height: 30px;
  background: cyan;
  border: 1px solid black;
  transition: 250ms min-height linear;
}

.accordion-item.is-open {
  min-height: 150px;
}

.accordion-item:nth-of-type(even) {
  background: lightcoral;
}

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  
  
<div class="accordion">
  <div class="accordion-item is-open"></div>
  <div class="accordion-item"></div>
  <div class="accordion-item"></div>
  <div class="accordion-item"></div>
</div>