使div向下滑动

Question

我正在尝试使所有灰色框在每次单击时都向下滑动。 我有4格，当单击其中之一时，它必须向下滑动

我正在尝试获取其类，并尝试触发点击。 它只能在具有相同类的所有组件上运行，并且只能在具有该类的组件上运行。

<style>
#ab4 {
    padding: 4% 10% 10% 15%; 
    .col-md-3 {
        text-align: center;
        img {
            position: absolute;
            top: 0px;
            left: 15%;
        }
    }
    .box {
        // background-color: red;
        .dados {
            display: block;
            margin-left: auto;
            margin-right: auto;
            background-color: $copy;
            width: 50%;
            -webkit-border-bottom-right-radius: 500px;
            -webkit-border-bottom-left-radius: 500px;
            -moz-border-radius-bottomright: 500px;
            -moz-border-radius-bottomleft: 500px;
            border-bottom-right-radius: 500px;
            border-bottom-left-radius: 500px;
            margin-top: 11%;
            // z-index: -1;
            ul {
                list-style: none;
                padding: 0;
                li {
                    color: $preto;

                    &:last-child {
                        margin-top: 7%;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
<section id="ab4" class="container-fluid">
    <div class="row">
        <div class="col-md-3">
           <div class="box">
              <div class="dados"> 
                 <ul>
                    <li>dfsddffsfs</li>
                    <li>dfsddffsfs</li>
                    <li>dfsddffsfs</li>
                    <li>dfsddffsfs</li>
                    <li class="click0"><i class="fas fa-chevron-down"></i></li>
                  </ul>
               </div>
               <img src="/assets/device.png" alt="">
           </div>
       </div>
    </div>
</section>

<script>
// down device
const downDevice = () => {
    const device = document.querySelector('.dados ul li.click0');

    device.addEventListener('click', () => {
        alert('terra');
    })
}

downDevice();
</script>

注意：只有4个div作品之一，我希望每个作品都能在点击时滑动。

Answer 1

使用J查询可以很容易地做到这一点。

最简单的方法是slide方法：

如果要单击单击，只需在文档中使用click事件。准备部分。

$(document).ready(function(){
    $( ".clickme" ).click(function() {
        $( this ).slideDown( "slow", function() {
           // Animation complete.
        });
    });
}

由于有许多有用的功能，因此这里是完整API的链接：https://jquery.com/

Answer 2

李应该怎么走？

我将其复制到密码笔（https://codepen.io/omergal/pen/QWLgbbx）

每个控制台都有console.log，现在怎么办？

// down device
const downDevice = () => {
    const devices = document.querySelectorAll('li');

    devices.forEach(device => {
       device.addEventListener('click', (ev) => {
        console.log(ev.target)
        })
    })
     
}

downDevice();

#ab4 {
    padding: 4% 10% 10% 15%; 
    .col-md-3 {
        text-align: center;
        img {
            position: absolute;
            top: 0px;
            left: 15%;
        }
    }
    .box {
        // background-color: red;


        .dados {
            display: block;
            margin-left: auto;
            margin-right: auto;
            background-color: lightblue;
            width: 50%;
            -webkit-border-bottom-right-radius: 500px;
            -webkit-border-bottom-left-radius: 500px;
            -moz-border-radius-bottomright: 500px;
            -moz-border-radius-bottomleft: 500px;
            border-bottom-right-radius: 500px;
            border-bottom-left-radius: 500px;
            margin-top: 11%;


            // z-index: -1;
            ul { 
                list-style: none;
                padding: 0;
                li {
                  cursor:pointer;
                    color: green;

                    &:last-child {
                        margin-top: 7%;
                        cursor: pointer;
                    }
                }

            }
        }
    }
}

<section id="ab4" class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="box">
                    <div class="dados"> 
                        <ul>
                            <li>11111111</li>
                            <li>2222222</li>
                            <li>3333333</li>
                            <li>4444444</li>
                            <li class="click0"><i class="fas fa-chevron-down"></i></li>
                        </ul>
                    </div>
                    <img src="/assets/device.png" alt="">
                </div>
            </div>
</div>
</section>