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