Question

我正在尝试创建一个下拉类型的菜单。所以在单击div菜单时淡入和再次单击它fadesOut，但淡出似乎不能正常工作......

$(document).ready(function(){

$('#clickable_div').click(function() {
var $somediv = $('#nav_menu');

    if($somediv.is(':visible')){

        $somediv.hide().fadeOut(300);
    }else{

        var $this = $(this);
        $('#nav_menu').css({
        display:'block',
            top: $this.offset().top + $this.height(),
            left: $this.offset().left,
            position: 'absolute'
        }).show();
    $('#nav_menu').hide().fadeIn(300);

 }
});


});

Answer 1

你错了

$somediv.hide().fadeOut(300);

用户隐藏或fadeOut

Answer 2

尝试使用您的脚本，以下是我所做的更改。

$('#clickable_div').click(function() {
var $somediv = $('#nav_menu'); //you have passed the element in a variable so you can use this every where as per the need.

    if($somediv.is(':visible')){

        $somediv.fadeOut(700); // no need to use hide() function fadeOut() will do the needful for you. 
    }else{

        var $this = $(this);
        $somediv.css({ //you wrote $("#nav_div") not needed you can access the variable. unnecessary you will search the complete document to get the div again.
            top: $this.offset().top + $this.height(),
            left: $this.offset().left,
            position: 'absolute'
        }).fadeIn(700); // no need to use show() and display:block; this will be taken care by the fadeIn() function.


 }
});

编辑：点击jsfiddle

检查DEMO

下拉淡出似乎不起作用

2 个答案: