如何调用我的jQuery函数onload来关闭jsp页面中的所有div



我有一个jQuery功能可以在点击时打开和关闭div,它运行得很好,但我想在加载时加载关闭功能。这是我的代码。。

   <!DOCTYPE html>
    <html><head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <title>jQuery Collapsible Demo</title>
    <!-- CSS -->
    <link rel="stylesheet" href="css/github.css" type="text/css">
    <link rel="stylesheet" href="demo.css" type="text/css">
    <!-- /CSS -->
  <style>       
    .circle {
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
    }
    #circle2 {
        width: 25px;
        height: 20px;
        background: #1998D7;
    }
    @-webkit-keyframes spin {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes spin {
      from { -moz-transform: rotate(0deg); }
      to { -moz-transform: rotate(360deg); }
    }
    @-ms-keyframes spin {
      from { -ms-transform: rotate(0deg); }
      to { -ms-transform: rotate(360deg); }
    }
    #advanced {
        width: 20px;
        height: 20px;
        background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
        background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
        background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);

        /* webkit chrome, safari, mobile */
          -webkit-animation-name: spin; 
          -webkit-animation-duration: 3s; /* 3 seconds */
          -webkit-animation-iteration-count: infinite; 
          -webkit-animation-timing-function: linear;
          /* mozilla ff */
          -moz-animation-name: spin; 
          -moz-animation-duration: 3s; /* 3 seconds */
          -moz-animation-iteration-count: infinite; 
          -moz-animation-timing-function: linear;
          /* microsoft ie */
          -ms-animation-name: spin; 
          -ms-animation-duration: 3s; /* 3 seconds */
          -ms-animation-iteration-count: infinite; 
          -ms-animation-timing-function: linear;
    }
</style>
</head>
 <script>
function testOnLoad(){
 function closeAll() {
        $('.page_collapsible').collapsible('closeAll');
    }

     $('#closeAll').click(function(event) {
        event.preventDefault();
        closeAll();
    });
}
</script>
 <body onload="testOnLoad();">
 <h1 align="center">DASHBOARD</h1>
 <!-- left column collapsible -->
 <!-- /left column collapsible -->
 <div id="content">
    <a href="#" id="closeAll" title="Close all">Open All</a> | <a href="#"    id="openAll" title="Open All">Close All</a>
    <!-- collapsible -->
    <div align="center">
    <div class="page_collapsible collapse-close" id="body-section1" >STPCODE NOT REGISTERED<span></span>&nbsp;&nbsp;&nbsp;<div id="circle2" class="circle">10</div></div> 
    <div style="display: none;" class="container" >
      <div class="content">
           <p>
               stpcode list
           </p>
        </div>
    </div>
   <!-- end collapsible -->

     <!-- collapsible -->
    <div class="page_collapsible collapse-close" id="body-section1">TOTAL NUMBER OF REGISTERED USERS IN DRAFT MODE<span></span></div>
     <div style="display: none;" class="container">
         <div class="content">
           <p>
              REGISTERED USERS IN DRAFT MODE
            </p>
        </div>
    </div>
    </div>
     <!-- end collapsible -->
<!-- collapsible -->
   <div class="page_collapsible collapse-close" id="body-section1">TOTAL NUMBER OF REGISTERED USERS IN PAYMENT INITIATED MODE<span></span></div>
    <div style="display: none;" class="container">
    <div class="content">
        <p>
           REGISTERED USERS IN PAYMENT INITIATED  MODE
        </p>
    </div>
</div>
 <!-- collapsible -->
<div class="page_collapsible collapse-close" id="body-section1">TOTAL NUMBER OF REGISTERED USERS IN PAYMENT REJECTED MODE<span></span></div>
<div style="display: none;" class="container">
    <div class="content">
        <p>
           REGISTERED USERS IN PAYMENT REJECTED  MODE
        </p>
    </div>
</div>
<!-- end collapsible -->
 <!-- collapsible -->
<div class="page_collapsible collapse-close" id="body-section1">TOTAL NUMBER OF REGISTERED USERS IN DISAPPROVED MODE<span></span></div>
<div style="display: none;" class="container">
    <div class="content">
        <p>
           REGISTERED USERS IN DISAPPROVED  MODE
        </p>
    </div>
</div>
<!-- end collapsible -->
</div>
<!-- end collapsible -->

<!-- collapsible -->
<!-- end collapsible -->
</div>
 <!-- JS -->
     <script type="text/javascript" src="jquery_003.js"></script>
     <script type="text/javascript" src="highlight.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery_002.js"></script>
    <script type="text/javascript">
     $(document).ready(function() {
    //syntax highlighter
    hljs.tabReplace = '    ';
    hljs.initHighlightingOnLoad();
    $.fn.slideFadeToggle = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };
    //collapsible management
    $('.collapsible').collapsible({
        defaultOpen: 'section1',
        cookieName: 'nav',
        speed: 'slow',
        animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        animateClose: function (elem, opts) { //replace the standard slideDown with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        loadOpen: function (elem) { //replace the standard open state with custom function
            elem.next().show();
        },
        loadClose: function (elem, opts) { //replace the close state with custom function
            elem.next().hide();
        }
    });
    $('.page_collapsible').collapsible({
        defaultOpen: 'body_section1',
        cookieName: 'body2',
        speed: 'slow',
        animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        animateClose: function (elem, opts) { //replace the standard slideDown with custom function
            elem.next().slideFadeToggle(opts.speed);
        },
        loadOpen: function (elem) { //replace the standard open state with custom function
            elem.next().show();
        },
        loadClose: function (elem, opts) { //replace the close state with custom function
            elem.next().hide();
        }
    });
    //assign open/close all to functions
    function openAll() {
        $('.page_collapsible').collapsible('openAll');
    }
    function closeAll() {
        $('.page_collapsible').collapsible('closeAll');
    }
    //listen for close/open all
    $('#closeAll').click(function(event) {
        event.preventDefault();
        closeAll();
    });
    $('#openAll').click(function(event) {
        event.preventDefault();
        openAll();
    });
   });
</script>
<!-- /JS -->

</body></html>

有人能帮我如何在加载

时调用关闭函数吗

实际上。。。定义testOnload函数的脚本标记位于head标记和body标记之外。。。我认为这在html中是不允许的。因此,该脚本块可能永远不会执行。

testOnLoad()函数执行得很好。当函数被调用时,你会得到".colleble"不是一个函数。可能是因为函数是在一个.js脚本中定义的尝试在导入的.js文件下移动包含该函数的标记。

您可以使用您的函数并通过调用它,也可以使用脚本形式"Viswanath D"

我还注意到CloseAll函数有多个声明。

最新更新