Question

我目前正在尝试学习jquery的基础知识，并希望了解如何实现以下目标。

当我点击“下拉”链接时，隐藏的链接列表就会淡入，当我点击除#innerList标签之外的页面的任何部分时，隐藏列表会淡出或者如果我点击其中一个隐藏的链接然后列表也淡出。

我目前的工作是http://jsfiddle.net/kyllle/b6XC4/

如何就如何实现这一结果提出一些建议会很棒。

Answer 1

如果您将JS更改为以下内容，则会获得所描述的效果。

var innerList = '#innerList';

    $(innerList).hide();

    $('a.mainButton').click(function(e) {
        $(innerList).fadeIn('slow');
        e.stopPropagation();
    });
    $(document).click(function(e){
        $(innerList).fadeOut('slow');
    });

另外，我建议将标签href更改为“＃”进行测试或完全删除href。

创建了jsfiddle。

Answer 2

你可以这样做（我错过了你对“隐藏链接”的意思，是否意味着当你点击链接时它也必须隐藏？）;

var innerList = $('#innerList');

    innerList.hide();
    $('a.mainButton').click(function(e) {
        e.preventDefault();
       innerList.fadeIn('slow');
        e.stopPropagation();
    });

$(document).click(function(e){
   var id= $(e.target).closest('ul').attr('id');
    if (id !== 'innerList' && innerList.is(':visible')){
        innerList.fadeOut('slow')
            }else{
                e.preventDefault();
            }
});

在这里摆弄http://jsfiddle.net/b6XC4/40/

Answer 3

这个（更小的代码）

var $innerList = $('#innerList').hide(); //Set $innerList to the DOM object so that it only needs to be found once. Also hide the object. "hide()" returns self so we can combine the two in one line.
$('ul.dropDown').click(function(e) {
    $innerList.fadeToggle('slow');
    e.stopPropagation(); //stop the click event bubbling back to the document which would also fire the function below (undoing what this function just did)
});
$(document).click(function() {
    $innerList.fadeOut('slow');
});

jsFiddle link

由于使用了jQuery

，这应该是跨浏览器的

使用click事件淡入并淡出隐藏的div

3 个答案: