Question

我需要将可折叠菜单图像从折叠状态更改为展开状态代码：

    <ul id="VerColMenu">
                <?php 

                $u = 0;                 
                $groupStarted = 0;
                foreach($BUTTON as $B){
                    $level= $B->getAttribute('LEVEL');
                    $levelAction= $B->getAttribute('ACTION');

                    if ($level=="Group") {
                        if($groupStarted ==1){
                            echo '</ul>';
                            echo '</li>';
                            $groupStarted =0;
                        }
                        if($levelAction=="Expand"){
                            echo '<li>';
                            echo '<a href="#" class="swap-menu active"><img id="menu_image"  src="images/collapsed.gif" hspace = "2"/>'.$B->getAttribute('TITLE').'</a>';
                            echo '<ul style="display:none;" class="sub-menu">';
                            $groupStarted =1;
                        }

                    }
                    if ($level=="Item" || $groupStarted==0) {

                        echo '<li>';
                        echo '<a href="#" class="direct-link">'.$B->getAttribute('TITLE').'</a>';
                        echo '<input type="hidden" name="menu-id" value="'.$u.'"/>';
                        echo '<input type="hidden" name="slider" value="'.$B->getAttribute('SLIDER').'"/>';
                        echo '<input type="hidden" name="min" value="'.$B->getAttribute('MIN').'"/>';
                        echo '<input type="hidden" name="max" value="'.$B->getAttribute('MAX').'"/>';
                        echo '</li>';
                        $u++;
                    }
                }

            ?>          

        </ul>

js：

$(function(){

        $('.swap-menu').bind('click',function(event){

            $('.sub-menu').find("+ ul").slideUp(1);
            $(this).find("+ ul").slideToggle("fast"); 
            document.getElementById('menu_image').setAttribute("src","images/expanded.gif")
            //var verify = document.getElementById('menu_image').value;
            // alert(verify);    
        /*    if ($(this).hasClass("active")) {
                $('.swap-menu').removeClass("active");
                $(this).addClass("active");
                $(this).find("img").attr('src','images/collapsed.gif'); 
            }  */

        /*    $('.sub-menu').find("+ ul").slideUp(1);
            $(this).find("+ ul").slideToggle("fast"); 
            $(this).find("img").attr('src','images/expanded.gif');  */

        });


    $('.direct-link').bind('click',function(){
        if(!$(this).parents('.sub-menu').length){
            $('.sub-menu').hide();

        }               
        var $current=$(this).parent();
        var id=parseInt($current.find('input:hidden[name=menu-id]').val());
        var slider=$current.find('input:hidden[name=slider]').val();
        var min=parseInt($current.find('input:hidden[name=min]').val());
        var max=parseInt($current.find('input:hidden[name=max]').val());            
        button_clk(id, slider, min, max);
    });
});

这是我们需要做的部分：崩溃的国家找到图片ID（）添加图片（）

倒塌→扩大后的状态查找图片标记ID（）将图像从Collapsed替换为Expanded（）

扩大的国家→崩溃的国家查找图片标记ID 将图像从Collapsed替换为Expanded

Answer 1

使用$("#menu_image").attr('src','image.gif'); http://jsfiddle.net/Kz6uV/2/

如何更改可折叠菜单的图像

1 个答案: