1

我一直在尝试 jQuery 中的一些基本动作，但我是它的初学者。如何做到这一点？

到目前为止，这是我的代码：

jQuery(document).ready(function () {

    // show/hide
    jQuery('#div').hide(); //hide at the beginning

    jQuery('#hover').hover(function () {
        jQuery("#div").show(400);
        jQuery('#hover').text('-');
        jQuery('#hover').addClass('click');
        jQuery('.click').height('auto');
        jQuery('.click').width('auto');
        jQuery('.click').css("font-size", "1em");
    }), jQuery("#div").hover(function () {
        //nothing on hover over
    }, function () {
        //hide on hover out
    });
});

我的 HTML 标记如下：

<a id="hover" href="javascript:;">Hide</a>
<div id="div">test</div>

我觉得我做错了。你能帮助我吗？

4

2 回答 2

3

您的语法似乎有点不对劲，因为您已经声明了两个hover函数并且甚至没有点击处理程序？

尝试这个：

$('#hover')
    .mouseenter(function() {
        $('#div').show();
    })
    .click(function(e) {
        e.preventDefault();
        $('#div').hide();
    });

示例小提琴

于 2013-10-07T16:18:42.077 回答
1

我想我知道你要做什么了。我修改了您的 dom 并使用了类以使其更灵活，因为这看起来像是您可能拥有多个的东西，如果没有，您可以切换回 id。

小提琴

jQuery(document).ready(function () {
    jQuery(".div").hide(); //hide at the beginning

    jQuery('.hover').hover(function () {
        jQuery(this).siblings(".div").show(400);
    });
    jQuery(".div").on("mouseout", function () {
        jQuery(this).hide();
    });
});

这是另一个使用单击更改（打开/关闭）文本的选项：

小提琴

jQuery(document).ready(function () {
    jQuery(".div").hide(); //hide at the beginning

    function hideDiv(e) {
        e.preventDefault();
        jQuery(this).text('open')
            .click(showDiv)
            .siblings(".div").hide(400)
    }

    function showDiv(e) {
        e.preventDefault();
        jQuery(this).text('close')
            .click(hideDiv)
            .siblings(".div").show(400)
    }
    jQuery('.hover').click(showDiv);
});
于 2013-10-07T16:33:44.223 回答