Question

当我点击这个div：

<div class="blog" style="background-image: url(<?php echo get_template_directory_uri(); ?>/template-parts/img/blog-post-img.jpeg)">
<div class="overlay">
    <h1 class="title">24-08-17 // VDM ZERO</h1>
    <img src="<?php echo get_template_directory_uri(); ?>/template-parts/img/krul.png" alt=""/>
</div>

我想让这个div在另一个div下滑下来：

<div class="uitgeklapt">
<h1>24-08-17 // VDM ZERO</h1>
<img src="<?php echo get_template_directory_uri(); ?>/template-parts/img/krul-oranje.png" alt=""/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur blanditiis, aut beatae quaerat similique ab qui maiores molestias maxime dolorum ratione quos animi autem recusandae tempora voluptas, doloremque nemo ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minus voluptate dolorem incidunt optio beatae dolor aut pariatur placeat eius tempora omnis, laborum, amet dolorum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto accusamus ad nostrum quas similique totam odit, nam, eum veritatis ut nisi, possimus laboriosam quia debitis?</p>
<div class="social-media">
    <a href=""><i class="fa fa-twitter"></i></a>
    <a href=""><i class="fa fa-facebook-official fb"></i></a>
    <a href=""><i class="fa fa-envelope"></i></a>
</div>
<i class="fa fa-angle-double-up arrow"></i>

我已经有了这段代码，但是当我想在我的页面上的更多地方重复相同的代码时，所有div都向下滑动，但我只想让你点击div下方的div向下滑动并且可见

<script>
$( document ).ready(function() {
$(".uitgeklapt").hide();
});

$(".blog").click(function(){
$(".uitgeklapt").slideToggle(1000);
});

$(".arrow").click(function(){
$(".uitgeklapt").slideUp(1000);
});

</script>

Answer 1

当你使用它的类获得div时，它将返回该类的每个div。尝试使用jquery的next()函数来获取下一个div而不是仅通过类名获取它，如下所示：

$(".blog").click(function(){
    $(this).next(".uitgeklapt").slideToggle(1000);
});

https://jsfiddle.net/7qz3cyuw/3/

如何向下滑动单击div下方的div？

1 个答案: