使用同一类的多个 div 一次打开答案

【问题标题】：multiple div using the same class open at once使用同一类的多个 div 一次打开
【发布时间】：2011-08-17 01:22:27
【问题描述】：

我在自定义 tumblr 主题中为多个隐藏显示 div 使用 javascript 函数。我的问题是类名相同，如果我单击单个 div，默认情况下所有 div 都会显示或隐藏。

  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
   $(".toggleme").click(function () {
    $(".toparea3").slideToggle("slow");
  return false;
   });
    });
</script>

<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a>

<div class="toparea3" style="display:none;">
    <div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;">
        <div class="share-bar-buttons">
            <div class="share-bar-facebook">
                <iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
            </div>
        </div>
        <div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter">
            <a href="http://twitter.com/share" class="twitter-share-button"
                                      data-url="{Permalink}" 
                                      {block:Twitter}data-via="{TwitterUsername}"{/block:Twitter} 
                                      data-related="stylehatch:Premium Tumblr Themes by @newezra"></a>
        </div>

        <div style="float: right;margin-top:-25px;" class="share-bar-shorturl">
            <div class="linktumb">
                http://www.tumblr.com/xdrs2sf
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript html tumblr

【解决方案1】：

假设您有多个“toggleme”按钮，如果它们都采用您有一个 toggleme 按钮和一个 toparea3 的格式，您可以执行以下操作：

$('.toggleme').click(function(){
    $(this).next().slideToggle('slow');
    return false;
});

“next”函数获取 DOM 中的下一个元素，也就是您要展开的元素。

【讨论】：

ceescripts.tumblr.com这是链接，当你点击分享这个按钮时，所有的div都会显示/隐藏
嗯，那是因为你使用了 Chad 的想法，并且你给了他们所有相同的哈希值。每个都应该有一个不同的哈希对应于你要打开的 div。
我不能有不同的css id，因为toparea3 div是由tumblr迭代的

【解决方案2】：

编辑：（不要介意 .children）

尝试使用 .closest 选择器，或其他人建议的 .next 选择器。请记住提供选择器.toparea3 以确保仅打开该类，而不仅仅是任何最近/下一个元素。

$(document).ready(function() {
    $(".toggleme").click(function () {
        $(this).closest(".toparea3").slideToggle("slow");
        return false;
    });
});

【讨论】：

我不认为 toparea div 是 toggleme 链接的子级。
给你，小提琴。我的.closest 想法没有奏效。但是威尔的.next 想法做到了。 jsfiddle.net/8ALaU

【解决方案3】：

我会推荐以下内容：

将“a”和相应的“div”放在父“div”中。像这样的：

<div>
    <a class='toggleMe' />
    <div class='toparea3 />
</div>

然后您可以将内部选择器更新为：

$('.toggleMe').click(function(evt){
    evt.preventDefault();
    var parent = $(this).closest('div');
    $(".toparea3", parent).slideToggle("slow");
}

【讨论】：

【解决方案4】：

我的建议是给 div 一个 id，并让锚元素的 href 指向它：

<script>
$(document).ready(function() {
    $(".toggleme").click(function () {
        $(this.hash).slideToggle("slow");
        return false;
    });
});
</script>

<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a>

<div id="toparea3_1" class="toparea3" style="display:none;"></div>

这是因为哈希以 #toparea3_1 的形式给出，这是一个有效的 jQuery 选择器，可以根据 ID 进行选择，可以直接使用。

【讨论】：