jquery - 使用带有锚标记触发器的 jquery 使 div 出现

Question

嘿，所以我想知道如何让网页的一部分向下滑动，露出它后面的另一个 div。我希望这个触发器是点击一个标签（虽然如果这不可能，那么我可以改变它......）

我将如何构建它以及什么 jquery 和 CSS 是合适的？我在 HTML 和 CSS 方面有经验，但在 jquery 方面几乎没有。

谢谢。

Answer 1

如果您想使用相同的按钮显示和隐藏它，请使用slideToggle()而不是 slideDown：

$("#link").click(function(){
    $("#div").slideToggle();
});

Answer 2

供您玩的简单示例：

<a id="myLink">Click me</a>
<div id="mySlider">Tada!</div>

JS：

$(function() {
    $('#myLink').click(function() {
        $('#mySlider').slideDown();
    });
});

http://jsfiddle.net/samliew/txcbA/

Answer 3

只需使用 $("#div").slideToggle();

使用在锚标记的点击事件上触发的功能。

$(function()
  {
      $('#dropIt').click(function(e)
        {
            e.preventDefault();
            $('.dropdown').slideToggle(2000);
        });
  });

这是参考：演示

Answer 4

JS

$('.tag').click(function(){
    ($('#top').css("margin-top")=="0px") ? $('#top').animate({marginTop:"100px"},500) : $('#top').animate({marginTop:"0px"},500); 
});

创建了一个带有工作演示的 jsFiddle - http://jsfiddle.net/Kh3GE/

享受

Answer 5

您可以在锚标记内使用 onclick 属性，类似于以下内容：

<a id="mydiv" onclick=myfunction()>text</a>

然后在 html 文档头部的脚本标签内，定义 myfunction()。myfunction() 将显示嵌套的 div，最初将设置为隐藏 - 可能使用 css。

myfunction()
{
    $('#nested_div').show();
}

这是假设嵌套 div 的 id 是“nested_div”。您还必须确保 jquery 库是 1）通过 html 页面链接的，并且 2）位于指定的路径。

希望这可以帮助。