Div滚动向下和滚动向上与jquery

Div scroll down and scroll up with jquery

本文关键字：滚动 jquery Div      更新时间：2023-09-26

我是jquery新手。我试图得到这个动画:当鼠标移到或单击每个菜单时，每个菜单会分别折叠，当我再次单击时，菜单会再次向上滚动。我写了这段代码，但我不知道为什么它不工作!请帮助。由于

 $(document).ready(function() {
          $(".lead-title-index").on('click',function() {
              if(clicked)
              {
              clicked=false;
                  &(".featured-content").slideDown("slow");
                  
              }
              else
              {
              clicked=true;
              &(".featured-content").slideUp("slow");
              }
              });
        });
.featured-content {
  width: 200px;
  height: 400px;
  display: none;
  background: #2E2E2E;
}
.lead-title-index {
  background: #FFBF00;
  display: block;
  margin-bottom: 0px;
  position: relative;
  color: #000;
  font-size: 14px;
  width: 200px;
  height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="col-md-15 col-sm-3">
  <div class="lead-title-index">
  </div>
  <article id="video" class="featured-content">
    <div class="promo-text">
    </div>
  </article>
</div>
<div class="col-md-15 col-sm-3">
  <div class="lead-title-index">
  </div>
  <article id="video" class="featured-content">
    <div class="promo-text">
    </div>
  </article>
</div>

你可以试试:

 $(document).ready(function() {
          $(".lead-title-index").on('click',function() {
              $(".featured-content").slideToggle("slow");
              });
        });
.featured-content {
  width: 200px;
  height: 400px;
  display: none;
  background: #2E2E2E;
}
.lead-title-index {
  background: #FFBF00;
  display: block;
  margin-bottom: 0px;
  position: relative;
  color: #000;
  font-size: 14px;
  width: 200px;
  height: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="col-md-15 col-sm-3">
  <div class="lead-title-index">
  </div>
  <article id="video" class="featured-content">
    <div class="promo-text">
    </div>
  </article>
</div>
<div class="col-md-15 col-sm-3">
  <div class="lead-title-index">
  </div>
  <article id="video" class="featured-content">
    <div class="promo-text">
    </div>
  </article>
</div>

这里有几个错误。

首先

:

改变
&(".featured-content").slideDown("slow");
&(".featured-content").slideUp("slow");


$(".featured-content").slideDown("slow");
$(".featured-content").slideUp("slow");

由于&不是一个有效的jquery语法。

第二:

变量clicked没有定义。全局定义在document.ready函数之后。

你的最终代码应该看起来像这样:

$(document).ready(function () {
    var clicked;
    $(".lead-title-index").on('click', function () {
        if (clicked) {
            clicked = false;
            $(".featured-content").slideDown("slow");   
        } else {
            clicked = true;
            $(".featured-content").slideUp("slow");
        }
     });
});

你可以在这里查看工作演示

首先，您不需要clicked标志。将&更改为$(我确信这是一个错误)。您所需要的一切就像下面这样简单。

$(document).ready(function() {
    $(".lead-title-index").on('click',function() {
        var $featuredContent = $(".featured-content");
        $featuredContent.is(":hidden") && $featuredContent.slideDown("slow") || $featuredContent.slideUp("slow");
    });    
});
.featured-content {
  width: 200px;
  height: 400px;
  display: none;
  background: #2E2E2E;
}
.lead-title-index {
  cursor: pointer;
  background: #FFBF00;
  display: block;
  margin-bottom: 0px;
  position: relative;
  color: #000;
  font-size: 14px;
  width: 200px;
  height: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<div class="col-md-15 col-sm-3">
  <div class="lead-title-index">
  </div>
  <article id="video" class="featured-content">
    <div class="promo-text">
    </div>
  </article>
</div>
<div class="col-md-15 col-sm-3">
  <div class="lead-title-index">
  </div>
  <article id="video" class="featured-content">
    <div class="promo-text">
    </div>
  </article>
</div>

甚至更好，试试jQuery。slideToggle是slideUp和slideDown的缩写，取决于元素的显示状态。

$(document).ready(function() {
    $(".lead-title-index").on('click',function() {
        $(".featured-content").slideToggle("slow");
    });
});

感谢大家，但我需要的是:第一次，当鼠标悬停在.lead-title-index上时，.featured-content会出现。第二次点击.lead-title-index时，.featured-content消失

相关文章：