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

Question

我試圖制作一個可以在按下V形后隱藏的菜單，但是當我按下它時，它也會隱藏V形。 我知道為什么會這樣（因為我以人字形的父對象為目標，所以它也受fadeToggles的效果影響），但是我已經嘗試了一段時間了。 我嘗試使用.not（）並添加僅包含按鈕但無濟於事的div。 我希望能夠將元素在'#FixedMenu'中定位為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

由於您需要#FixedMenu內部的圖像， #FixedMenu我采用了另一種方法。

您不能淡入淡出切換父級，否則里面的所有內容都會隱藏。 我正在做的是添加和刪除一個類，以更改css具有相同的效果。

這是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)'
        });
    });
});

我更改的CSS，

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

最后，這是一個小提琴： JSFIDDLE

Answer 2

將圖像放在div之外，它將正常工作：

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

查看是否符合您的需求：

jsFiddle

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