Question

我正在尝试交换所有崩溃的图像并在点击时展开全部但我真的没有得到它请任何人帮助我...提前感谢

这是样本的链接 http://www.ornusweb.com/showcase/checking/collapsible-menu.html 一切都工作正常，除了扩展所有按钮，我们点击它。它应该交换图像

请帮帮我!!!

这是css

body {
            font: 10pt Arial, Helvetica, Sans-serif;
        }
        a {
            text-decoration: none;
        }
        #example1,
        #example2,
        #example3,
        #example4,
        #example5 {
            float: left;
        }
        .expand_all{
            cursor: pointer;
        }
        .collapse_all {
            cursor: pointer;
        }
        .example_menu {
            font-size: 90%;
            list-style: none;
            margin: 0;
            padding: 0;
            vertical-align: top;
            width: 624px;
        }
        .example_menu ul {
            display: none;
            list-style: none;

            padding: 0;
        }
        #menu1,
        #menu2,
        #menu3,
        #menu4,
        #menu5 {
            margin: 0;
        }
        #menu1 li,
        #menu2 li,
        #menu3 li,
        #menu4 li,
        #menu5 li,
        .example_menu li {
            background-image: none;
            margin: 0;
            padding-bottom: 1px;
        }
        .example_menu ul ul {
            display: block;
        }
        .example_menu ul ul li a {
            padding-left: 20px;
            width: 109px;
        }
        .example_menu a {
            color: #000;
            cursor: pointer;
            display: block;
            font-weight: bold;
            margin-left: 0;
            padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
        }
        .example_menu a.expanded {
            background:  #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
        }
        .example_menu a.collapsed {
            background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
        }
        .example_menu a:hover {
            text-decoration: none;
        }
        .example_menu ul a {
            background: #e8e8e8;
            border-top: 2px solid #fff;
            color: #000;
            display: block;
            font-weight: normal;
            padding: 2px 2px 2px 10px;
            width: 119px;
        }
        .example_menu ul a:link {
            font-weight: normal;
        }
        .example_menu ul a:hover {
            background : #f5f5f5;
            text-decoration: underline;
        }
        .example_menu li.active a {
            background: #fff;
        }
        .example_menu li.active li a {
            background: #e8e8e8;
        }
        #menu1 li.footer,
        #menu2 li.footer,
        #menu3 li.footer,
        #menu4 li.footer,
        #menu5 li.footer,
        .example_menu .footer {
            background: transparent url('images/footer.jpg') no-repeat 0 0;
            border-top: 2px solid #fff;
            height: 9px;
            line-height: 15px;
            margin: 0 0 10px 0;
            width: 131px;
        }
        .example_menu .footer span {
            display: none;
        }




        /* nadeem css */

        .newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
        .newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
        .newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}


}

这是js

$(document).ready(function() {
            setTimeout(function() {
                // Slide
                $('#menu1 > li > a.expanded + ul').slideToggle('medium');
                $('#menu1 > li > a').click(function() {
                    $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
                });
                $('#example1 .expand_all').click(function() {
                    $('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
                });
                $('#example1 .collapse_all').click(function() {
                    $('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
                });

            }, 250);
        });

这是html

<div id="example1">

        <div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
        <ul id="menu1" class="example_menu">
            <li><a class="expanded">Section A</a>
        <ul class="newstyles">
            <li>Link A-A</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-B</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-C</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-D</li>
        </ul>
        </li>

            <li><a class="expanded">Section B</a>
        <ul class="newstyles">
            <li>Link A-A</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-B</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-C</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-D</li>
            </ul>
        </li>

            <li><a class="expanded">Section C</a>
        <ul class="newstyles">
            <li>Link A-A</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-B</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-C</li>
            <div class="newstyline"> &nbsp;</div>
            <li>Link A-D</li>
            </ul>
        </li>

        </ul>
    </div>

Answer 1

猜测它是顶部的两个图像，你可以这样做：

<div>
  <a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
   <img class="img-swap" src="images/toggle-buttons_01.png">
  </a>
  <a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
   <img alt="" src="images/toggle-buttons_02.png">
   </a>
</div>

简单地隐藏不相关的......虽然不是真的交换图像。

切换图像以展开全部并折叠全部

1 个答案: