Question

我是jquery的noob。我想要获得这个动画：当鼠标悬停或单击每个菜单单独折叠时，当我再次单击时，菜单再次向上滚动。我写了这段代码，但我不知道为什么它不起作用！请帮忙。感谢

 $(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>

Answer 1

这里有几个错误。

<强>第一：

更改

&(".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");
        }
     });
});

您可以查看有效的演示here。

Answer 2

你可以试试这个：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

首先，您不需要clicked标志。将&更改为$（我确定这是一个错误）。您所需要的只是以下内容。

＆＃13;

$(document).ready(function() {
    $(".lead-title-index").on('click',function() {

        var $featuredContent = $(".featured-content");
        $featuredContent.is(":hidden") && $featuredContent.slideDown("slow") || $featuredContent.slideUp("slow");
    });    
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

更好的是，尝试jQuery.slideToggle，这是slideUp和slideDown的简写，基于元素的显示状态。

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

Answer 4

谢谢你们所有人，但我需要的是：第一次，当鼠标悬停.lead-title-index时，会出现.featured-content。第二次，当用户点击.lead-title-index时，.featured-content将消失。

Div向下滚动并向上滚动jquery

4 个答案: