我的fadeToggle（）定位到一个我不想要的元素

Question

I am trying to make a menu that can be hidden after pressing a chevron but when I press it it also hides the chevron. I know why this is (because I target the chevron's parent so it is also affected by fadeToggles' effect) but I have been trying for a while now to come up with a solution. I've tried using .not() and adding a div that only encompasses the buttons but to no avail. I want to be able to position the elements inside '#FixedMenu' with margin-left.

http://jsfiddle.net/clarinetking/2PGZS/25/

JavaScript/JQuery

$('#FixedMenu').fadeToggle('slow');
$('#CloseMenu').css({'opacity' : '100'});  

---

HTML

<div id='FixedMenu'>
    <button class='MenuItem'></button>
    <button class='MenuItem'></button>
    <img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
    <button class='MenuItem'></button>
    <button class='MenuItem'></button>
    <img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>

Answer 1

Since you need the image inside of #FixedMenu I went about this a different way.

You can't fadeToggle the parent otherwise everything inside will hide. What I am doing is adding and removing a class to change the css to have the same effect.

Here is the jQuery:

$(document).ready(function () {
    var position = 0;
    $('#CloseMenu').click(function () {
        position += 180;
        $('#FixedMenu').toggleClass('active');
        $('#Main, .MenuItem').fadeToggle();
        $('#CloseMenu').css({
            '-webkit-transform': 'rotate(' + position + 'deg)',
                '-moz-transform': 'rotate(' + position + 'deg)',
                '-o-transform': 'rotate(' + position + 'deg)',
                '-ms-transform': 'rotate(' + position + 'deg)',
                'transform': 'rotate(' + position + 'deg)'
        });
    });
});

The css I changed,

#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}

Finally, here is a fiddle: JSFIDDLE

Answer 2

Put the image outside div and it will work fine :

http://jsfiddle.net/2PGZS/26/

<div id='FixedMenu'>
    <button class='MenuItem'></button>
    <button class='MenuItem'></button>
    <img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
    <button class='MenuItem'></button>
    <button class='MenuItem'></button>
</div>
<img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>

Answer 3

See if it fits your needs:

jsFiddle

$('#FixedMenu').children().not(this).fadeToggle('slow');