当按钮被按下时，如何在div元素中隐藏子元素？(不隐藏父对象)

在前端开发中，当按钮被按下时，可以通过使用CSS的display属性来隐藏div元素中的子元素，而不影响父对象。具体的解决方法可以有以下几种：

使用CSS的display属性：可以将子元素的display属性设置为none，实现隐藏。可以通过JavaScript来监听按钮的点击事件，然后在事件处理函数中使用CSS选择器选中子元素，并设置其display属性为none。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .child {
            display: block;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div class="child">子元素1</div>
        <div class="child">子元素2</div>
        <button onclick="hideChildren()">隐藏子元素</button>
    </div>

    <script>
        function hideChildren() {
            var children = document.querySelectorAll('#parent .child');
            for (var i = 0; i < children.length; i++) {
                children[i].style.display = 'none';
            }
        }
    </script>
</body>
</html>

在上述代码中，通过CSS将子元素的display属性设置为block（或其他可见的值），当按钮被点击时，调用JavaScript函数hideChildren()，使用querySelectorAll方法选中父元素下的所有子元素，并遍历设置它们的display属性为none，从而隐藏子元素。

使用JavaScript的classList属性：可以给子元素添加一个隐藏的CSS类，通过JavaScript的classList属性添加或移除该类来隐藏或显示子元素。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div class="child">子元素1</div>
        <div class="child">子元素2</div>
        <button onclick="hideChildren()">隐藏子元素</button>
    </div>

    <script>
        function hideChildren() {
            var children = document.querySelectorAll('#parent .child');
            for (var i = 0; i < children.length; i++) {
                children[i].classList.add('hidden');
            }
        }
    </script>
</body>
</html>

在上述代码中，首先定义了一个名为hidden的CSS类，它将子元素的display属性设置为none。当按钮被点击时，调用JavaScript函数hideChildren()，使用querySelectorAll方法选中父元素下的所有子元素，并通过classList属性的add方法添加hidden类，从而隐藏子元素。

无论使用哪种方法，隐藏子元素的效果都是相同的，具体选择哪种方法取决于项目需求和开发者的偏好。

注意：上述示例代码中未提及任何特定的云计算品牌商或腾讯云产品，因为此问题与云计算领域无直接关联。