如何让 div 中的边框仅在 Webpart 区域中具有 Web 部件时才显示>

Question

我有一个Web部件封装在一个div中，该div应用了一个边框(class="wpz-1"(。无论Web部件区域中是否有Web部件，边框都会显示在页面上。只有当Web部件区域中有Web部件时，我才能使边框显示？

<div class="wpz-1">
<div data-name="WebPartZone">
<!--CS: Web Part-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<div xmlns:ie="ie">
<!--MS:<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="x8600600cbb2046468f9615155e5fd921" FrameType="TitleBarOnly" Orientation="Vertical" >-->
<!--MS:<ZoneTemplate>-->
<!--DC: - Web Part  -->
<!--ME:</ZoneTemplate>-->
<!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: Web Part-->
</div>
</div>

Answer 1

您可以尝试根据区域的子元素更改div属性(如果Web部件区域中没有Web部件，根据我的测试，它将不会显示，所以请检查Web部件区域以确认<div customAttr="customAttr"中是否有Web部件(。

只是演示：

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<style>
.wpz-1{
border:1px fuchsia groove;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {
if ($('div.ms-webpart-zone', 'div[customAttr="customAttr"]').length < 1) {
$('div.wpz-1').removeClass("wpz-1");
}
})        
</script>
<WebPartPages:SPProxyWebPartManager runat="server" id="spproxywebpartmanager"></WebPartPages:SPProxyWebPartManager>
<p></p>
<div class="wpz-1">
<div data-name="WebPartZone">
<div customAttr="customAttr" xmlns:ie="ie">
<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="x8600600cbb2046468f9615155e5fd921" FrameType="TitleBarOnly" Orientation="Vertical" >                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
<ZoneTemplate>
<!--DC: - Web Part  -->
</ZoneTemplate>
</WebPartPages:WebPartZone>
</div>
</div>
</div>
</asp:Content>