Question

我有一个动画导航（http://tympanus.net/codrops/2011/03/16/expanding-image-menu/）并对其进行了修改，因此左侧有一个推子。我想要它做的就是当菜单处于展开状态时“隐藏”，并在菜单折叠时“显示”。这是我到目前为止编写的代码：

$menuItemsImgWrapper.on('click', function () {
    if ($('.ei_descr').is(':visible')) {
        $('#fader').hide();
    } else {
        $('#fader').show();
    }
});

推子隐藏得很好，但不会显示。如果有人能给我一个线索，为什么会这样，我真的很感激。谢谢你的时间。

Answer 1

这是因为具有类：“。ei_descr”的元素仍然可见。您只是声明隐藏了一个ID为“#fader”的元素。

因此，if语句中的代码将始终评估为true，除非您还隐藏“.ei_descr”。

Answer 2

检查插件处理打开/关闭文本的内容：

$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
    var $this   = $(this).parent(),
    idx     = $this.index();

    if(current === idx) {
        slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
        current = -1;
    }
    else{
        if(validCurrent() && current !== idx)
                slideOutItem($menuItems.eq(current), false, 250, 'jswing');

        current = idx;
            slideOutItem($this, true, 250, 'jswing');
    }
    return false;
});

为什么不使用该事件而if / else隐藏#fader？

类似

$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
    var $this   = $(this).parent(),
    idx     = $this.index();

    if(current === idx) {
        //then it collapses the text
        $('#fader').hide();
    }
    else{
        //then it expands the text
        $('#fader').show();
    }
    return false;
});

Answer 3

：可见性检查不透明度和可见性。 fade（）虽然将对象变为display：none;。因此，您的对象是可见的，但未在显示屏上显示。

Answer 4

只需使用Jquery的切换方法：

$menuItemsImgWrapper.on('click', function () {
    $('#fader').toggle();
});

如果#fader可见，它将隐藏#fader，如果隐藏

则显示它

Jquery-在点击功能上使用'show'和'hide'

4 个答案: