新手问题：js点击展开收起内容+图标变化

<STYLE>.blueopen{color:#06C; background-image:url(../images/blueopen_icon.gif); background-repeat:no-repeat; background-position:right;}
.blueopen2{color:#06C; background-image:url(../images/blueopen_icon2.gif); background-repeat:no-repeat; background-position:right;}<STYLE><a href="#" id="morecondition" class="blueopen" onclick="condition(this)">更多筛选条件</a>
<div id="condition"></div>
<script>
//点击展开收缩更多筛选条件
function condition(search_more){
    var text = $("#morecondition").html 
    $("#condition").toggle();
$("#morecondition").toggle(
  function () {
 
   $(this).addClass("blueopen2").removeClass("blueopen");
  },
 function () {
 
   $(this).removeClass("blueopen2").addClass("blueopen");
 }
);}</script>弄出来图标只能变一次。麻烦指点下。

解决方案 »

  1.   


    <html>
    <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <STYLE type="text/css">
    .blueopen{color:#06C; background-image:url(images/aa.jpg); background-repeat:no-repeat; background-position:right;width:100px;height:40px;}
    .blueopen2{color:#06C; background-image:url(images/bb.jpg); background-repeat:no-repeat; background-position:right;width:100px;height:40px;}
    </STYLE>
    </head>
    <body>
    <a href="#" id="morecondition" class="blueopen" onclick="condition(this)"></a>
    <div id="condition"></div>
    <script>
    //点击展开收缩更多筛选条件
    function condition(search_more){
    var text = $("#morecondition").html();
    $("#condition").toggle();
    $("#morecondition").toggleClass("blueopen2");
    $("#morecondition").toggleClass("blueopen");
    }
    </script>
    </body>
    </html>