Javascript 按类选择元素，更改它们的最大高度，然后更改单击的元素最大高度

Javascript select elements by class, change their max-height and then change clicked element max-height

本文关键字：高度元素然后单击选择 Javascript 更新时间：2023-09-26

所以在每个具有类单击打开的元素上，当单击时，我希望所有其他具有 ths class 的元素将其最大高度设置为 40px，并将单击的div 最大高度设置为 500px，所以我正在尝试做一些像 acordeon 一样的事情。所以使用Jquery可以工作，但是如何在Vanilla JS中实现它。

 <script>
            $(document).ready(function(){
                $('.click-to-open').on('click', function(){
                    if($(this).css('max-height') == '40px'){    
                        $('.click-to-open').css('max-height', '40px');
                        $(this).css('max-height', '500px');
                    }
                    else{
                        $('.click-to-open').css('max-height', '40px');
                    }
                });             
            });
        </script>

这个js脚本有效，但其他语句似乎不起作用Javascript脚本：

(function(){
                var elements = document.querySelectorAll('.click-to-open');
                for(var i = 0; i < elements.length; i++){
                    elements[i].addEventListener('click',setMaxHeight);
                }
                function setMaxHeight(){
                    for(var i = 0;i < elements.length; i++){
                        elements[i].style.maxHeight = '40px';
                    }
                    if(this.style.maxHeight == '40px'){                     
                        this.style.maxHeight = '500px';
                    }
                    else {
                        this.style.maxHeight = '40px';
                    }
                }
            })();

(function(){
    var elements = document.querySelectorAll('.click-to-open');
    for(var i = 0; i < elements.length; i++){
        //Add eventlistener to all elements and check height on click
        elements[i].addEventListener('click',checkMaxHeight);
    }
    function checkMaxHeight(){
        //Set maxheight on all elements to 40px
        for(var i = 0;i < elements.length; i++){
            setMaxHeight(elements[i],40);
        }
        //Check if clicked element has maxheight 40px
        if(this.style.maxHeight == '40px'){
            //Set max height on clicked element to 500px
            setMaxHeight(this,500)
        }
    }
    function setMaxHeight(element,value){
        element.style.maxHeight = value + 'px';
    }
})();