Question

我有手风琴菜单，当手风琴被激活时，我试图让图像从加号切换到零号。目前，我只能在点击任何内容时将所有图像更改为减号。链接上已有bg图像，我真的不想走这条路..

$(function() {

$('#menu ul').hide();
$('#menu > li').has('ul').children('a').addClass('disabled');
$('#menu').find('.disabled:last').addClass('lower');            //****=====will only add rounded corners to last menu item if it has a sub-menu=====****//
$('#menu').find('a:first').addClass('upper');
$('#menu > li').has('ul').children('a.disabled').click(function() {
    if ( $(this).next('ul').is(':visible')) {
        return false;
    } else {
        if ( $(this).hasClass('lower')) {
            $(this).removeClass('lower');
            $(this).parent().find('li > a:last').addClass('lower');
        } else {
            $(this).find('li > a:last').removeClass('lower');
            $('#menu ul:visible').slideUp('medium', function() {
                $('#menu').find('.disabled:last').addClass('lower');
            });
        }
        $('#menu ul:visible').slideUp('medium', function() {
            $('#menu:visible').find('img.top').attr('src','images/menu-dropdown.png')});
        $(this).next('ul:hidden').slideDown('medium', function() {
            $('#menu:hidden').find('img.top').attr('src','images/menu-minus.png')});
    }
}); 
$("a.disabled").live("click", function() {
    return false;
});

});

现在有整个手风琴......

更新：

$('#menu ul:visible').slideUp(400);
        $(this).next('ul:hidden').slideDown(400);
            $(this).parent().find('img.top').attr('src','images/menu-minus.png');
    }

将其更改为，让他们独立更改。但是我仍然无法让他们改回原来的img放置代码，我认为它应该去。

再次更新：这是菜单HTML ...

<ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Style Guide</a></li>
        <li><a href="#">Graphics <img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /></a>
            <ul>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Icons</a></li>
                <li><a href="#">Symbols</a></li>
            </ul></li>
        <li><a href="#">Best Practices<img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /></a>
            <ul>
                <li><a href="#">Guide</a></li>
            </ul></li>
        <li><a href="#">Marketing<img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /></a>
            <ul>
                <li><a href="#">Icons</a></li>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Pages Templates</a></li>
                <li><a href="#">Template</a></li>
                <li><a href="#">Template</a></li>
            </ul></li>
    </ul>

Answer 1

分辨率似乎只是对slideUp和slideDown遍历的一个小调整。这应该适合你：

$('#menu ul:visible').slideUp('medium', function() {
  $(this).prev().find('img.top').attr('src','images/menu-dropdown.png');
});

$(this).next('ul:hidden').slideDown('medium', function() {
  $(this).prev().find('img.top').attr('src','images/menu-minus.png');
});

没什么太大的，你只需要找到一个包含要旋转的图像的标签。

选择单个用户在jQuery中单击img

1 个答案: