如何在动态代码中更改可折叠菜单图像？答案

【问题标题】：How to change the collapsible menu image in dynamic code?如何在动态代码中更改可折叠菜单图像？
【发布时间】：2012-03-29 15:54:53
【问题描述】：

我有可折叠菜单的动态代码。我想在折叠菜单时更改图像 php可折叠菜单的动态代码：

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

这里是可折叠菜单的 javascript：

   $(function(){
    $('.swap-menu').bind('click',function(){        
        $('.sub-menu').find("+ ul").slideUp(1);
        $(this).find("+ ul").slideToggle("fast");
    }); 

       $('.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);
    });
});

【问题讨论】：

标签： php javascript css image submenu

【解决方案1】：

使用 addClass 和 removeClass 切换 css 类并为类分配不同的图像。用你的代码检查here ..

$(function(){
    $('.swap-menu').bind('click',function(){        
        $('.sub-menu').find("+ ul").slideUp(1);
        $(this).find("+ ul").slideToggle("fast");
        $('.swap-menu').toggleClass('current');// here you need to create one css class .current and put image you want to display or switch. Make sure you have alternate image for swap-menu which will switch with the current class
    });

       $('.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);
    });
});

【讨论】：

我们没有.swap-menu的css类，它只用于点击功能，我该怎么做？
不用担心。您仍然可以使用 .sap-menu check this 创建课程。您需要做的是将关闭状态设置为.swap-menu 类和打开状态图像设置为.current 类的任何图像。我用 before 放 > 但你可以直接使用 .swap-menu 而不是 .swap-menu:before
Check This我已经为你再次更新了但是不需要使用之前你可以直接在同一个类中分配.swap-menu和.current作为背景图片
检查此代码是否为 K .swap-menu:before{ content:"images/collapsed.gif" } .current:before{content:"images/expanded.gif"}
Check this 并将两个 css 类复制并粘贴到您的 style.css 文件中。如果您之前在样式表中定义了 .current 类而不是更改任何人，但如果您为此进行更改，请确保您在 jquery 中也使用相同的类。