课程章节介绍
让我们来聊聊如何在Salesforce中通过代码来控制页面上组件的显示和隐藏。这其实是一个非常实用的技巧，尤其是在你想要根据用户的操作动态改变页面内容时。
首先，我们有几个非常方便的工具函数，它们可以帮助我们操作DOM元素的样式类。这些函数都是由Salesforce提供的，名字分别是`$A.util.addClass`、`$A.util.removeClass`和`$A.util.toggleClass`。
- `$A.util.addClass(el, className)`：这个函数的作用是给指定的DOM元素添加一个样式类。比如，如果你想给某个元素添加一个让它显示的样式，就可以用这个函数。
- `$A.util.removeClass(el, className)`：这个函数的作用正好相反，它是从指定的DOM元素中移除一个样式类。比如，如果你想隐藏某个元素，就可以用这个函数移除让它显示的样式。
- `$A.util.toggleClass(el, className)`：这个函数非常智能，它会检查指定的DOM元素是否已经有这个样式类。如果有，就移除它；如果没有，就添加它。这样你就可以通过一个函数来实现显示和隐藏的切换。
接下来，我们来看看如何使用这些函数来切换元素的可见性。Salesforce的SLDS框架提供了一些预定义的CSS类，这些类可以帮助我们控制元素的显示和隐藏。
- `.slds-show`：这个类会让元素显示出来，它通过将`display`属性设置为`block`来实现。
- `.slds-hide`：这个类会让元素隐藏起来，它通过将`display`属性设置为`none`来实现。
- `.slds-hidden`：这个类也会让元素隐藏，但它使用的是`visibility`属性，设置为`hidden`。这样元素虽然看不见了，但它仍然占据页面上的空间。
- `.slds-visible`：这个类会让元素显示出来，它通过将`visibility`属性设置为`visible`来实现。
- `.slds-collapsed`：这个类用于隐藏容器内的元素，它通过控制`height`和`overflow`属性来实现。
- `.slds-is-expanded`：这个类用于显示容器内的元素，它会让容器内的内容展开显示。
举个例子，假设你有一个按钮，点击这个按钮时，你想切换一个元素的显示和隐藏。你可以这样做：
```javascript
toggleVisibility : function(component, event, helper) {
var el = component.find("myElement").getElement();
$A.util.toggleClass(el, 'slds-hide');
}
```
在这个例子中，`myElement`是你想要切换显示和隐藏的元素的ID。当你点击按钮时，`toggleVisibility`函数会被调用，它会检查`myElement`是否有`slds-hide`这个类。如果有，就移除它，让元素显示出来；如果没有，就添加它，让元素隐藏起来。
这样，你就可以通过简单的代码实现动态的显示和隐藏效果了。希望这个解释对你有帮助！