Question

我一直在尝试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>

我觉得我做错了。你能救我吗？

Answer 1

您的语法似乎有些偏差，因为您已声明了两个hover函数，甚至没有点击处理程序？

试试这个：

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

Example fiddle

Answer 2

我想我想出了你的目标。我修改你的dom并使用类来使它更灵活，因为这看起来像你可能有多个，如果不是你可以切换回id。

fiddle

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();
    });
});

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

fiddle

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);
});

在悬停时显示，用jQuery隐藏点击

2 个答案: