javascript - 无需单击即可展开所有切换

Question

JavaScript:

 <script>
        jQuery.noConflict();
        function toggleContactRow(rowId) {
                 var AccountImg = jQuery(document.getElementById(rowId + ":Img"));
                var ContactsRow = jQuery(document.getElementById(rowId + ":Contact"));
                 ContactsRow.show();
}
    </script>

视觉力量:

 <table id="tableAccount" class="list" border="0" cellpadding="0" cellspacing="0" >
                    <thead>
                        <tr class="headerRow">
                         <th class="actionColumn">Action</th>
                            <th>Account Name</th>
                            <th>Industry</th>
                            <th>Billing Country</th>
                            <th>Createdby</th>
                        </tr>
                    </thead>
                    <tbody>
                    <apex:repeat id="repeatAccount"
                        value="{!accountList}"
                        var="item">
                        <apex:variable var="acc" value="{!item.oAccount}" />   
                        <tr id="{!$Component.repeatAccount}:account" class="dataRow">
                         <td class="actionColumn">
                                <apex:inputcheckbox id="selectAccountRow"
                                    value="{!item.IsSelected}"
                                    onclick="javascript:toggleSelectAll(this, '{!$Component.repeatAccount}');"/>
                            </td>
                            <td class="dataCell">
                                <apex:outputLink id="linkShowHide" value="javascript:toggleContactRow('{!$Component.repeatAccount}')">
                                    <img id="{!$Component.repeatAccount}:Img" src="/s.gif" class="showContacts" border="0" height="11px" width="11px" style="padding-right: 4px;"/>
                                    <apex:outputField value="{!acc.Name}" />
                                </apex:outputLink>
                            </td>
                            <td class="dataCell"><apex:outputField value="{!acc.name}" /></td>
                            <td class="dataCell"><apex:outputField value="{!acc.Accountid}" /></td>
                            <td class="dataCell"><apex:outputField value="{!acc.Id}" /></td>
                        </tr>
                        <tr id="{!$Component.repeatAccount}:Contact" class="dataRow" style="display:none;">
                            <td colspan="100" style="padding:10px; padding-left: 45px;">
                                <h3>son opportunity</h3>
                                <br/>                                        
                                <apex:outputPanel layout="none">                                            
                                    <table id="tableAccountContacts" class="list" border="0" cellpadding="0" cellspacing="0">
                                        <thead>
                                            <tr class="headerRow">
                                                <th class="actionColumn">Action</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Phone</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <apex:repeat id="repeatAccountContacts"
                                            value="{!item.contactSet}"
                                            var="subitem">
                                            <apex:variable value="{!subitem.oContact}" var="con" />
                                            <tr class="dataRow">
                                                <td class="actionColumn"><apex:inputCheckbox id="selectContactRow" styleclass="ContactCheckbox" value="{!subitem.IsSelected}"/></td>
                                                <td class="dataCell"><apex:outputField value="{!con.id}" /></td>
                                                <td class="dataCell"><apex:outputField value="{!con.name}"/></td>
                                                <td class="dataCell"><apex:outputField value="{!con.accountid}" /></td>                                                        
                                            </tr>
                                        </apex:repeat>
                                        </tbody>
                                    </table>
                                </apex:outputPanel>
                            </td>
                        </tr>
                    </apex:repeat>
                    </tbody>
                </table>

目前，点击切换后，它会在 td 上展开。在 Visualforce 页面中，onload 不接受。所以我必须在 vf 页面中保留 onclick但我想在打开页面时显示完整展开的切换

帮我做这件事

我想在不点击的情况下显示项目展开切换我该怎么做？

Answer 1

简单展示

$( document ).ready(function() {
  $('.dataRow').show();
});

用于动画展示

$( document ).ready(function() {
  $('.dataRow').slideDown();
});