Question

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

  <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>

Answer 1

我会推荐以下内容：

将'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");
}

Answer 2

假设你有多个“toggleme”按钮，如果它们都是你有toggleme按钮然后是toparea3的格式，你可以这样做：

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

“next”函数获取DOM中的下一个元素，即您要扩展的元素。

Answer 3

编辑：（永远不要让.children）

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

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

Answer 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，并且可以直接使用。

多个div同时打开同一个类

4 个答案: