Question

显示/隐藏多个 div

2009-04-06

2107

javascript jquery

我试图一次触发一个 div 的显示/隐藏。

发生的情况是所有 div (.shareLink) 同时打开。

下面是我的 jQuery：

$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(){
$(".shareLink").toggle("400");
return false;
});
});

下面是我的 HTML：

<dl class="links">
    <dd>content</dd>
    <dt class="description">content</dt>
    <ul class="tools">      
        <li><a class="trigger" href="#">Share Link</a></li>
    </ul>
</dl>
<div class="shareLink">
<?php print check_plain($node->title) ?>
</div>

任何有关上述问题的帮助都将不胜感激。

干杯。

Answer 1

根据您的 HTML，您需要执行以下操作：

$(function() {
    $("div.shareLink").hide();
    $("a.trigger").click(function(){
        $(this).parents('dl.links').next('div.shareLink').toggle(400);
        return false;
    });
});

这将走到父 DL，然后移至下一个 shareLink div 并进行切换。

Answer 2

$(".shareLink").toggle("400");

指的是页面上任何带有“.shareLink”类的 div。

您需要找到一种方法来区分您想要显示的特定 div。

Answer 3

您可能想尝试：

$(document).ready(function(){
    $(".shareLink").hide();
    $("a.trigger").click(function(e){
        e.preventDefault();
        $(this).next().toggle("400");
    });
});

答案是，这取决于文档的结构。以下是可与上述函数配合使用的示例。

<a class="trigger">click here</a>
<div class="shareLink">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>