Div прокрутите вниз и прокрутите вверх с помощью jquery

Question

i am noob in 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>

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

Вы можете попробовать это:

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

Answer 3

Во-первых, вам не нужно 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"); 
    }); 
}); 

Answer 4

спасибо всем вам народные, но то, что мне нужно, это что: в первый раз, когда мышь парение .lead-title-index, то .featured-content появится. Во второй раз, когда пользователь нажмет .lead-title-index, исчезнет .featured-content.