Question

我使用了一段javascript代码，我在我的博客上找到了一个最小化按钮，但它没有按预期工作。该博客使用块来表示不同类型的帖子，例如{block：Photo}。

    {block:Photo}
    <div class="PhotoPost">
    <div class="PhotoWrapper">                            
    <div class="Button">-</div>    
    <div class="box">

    <script type="text/javascript">
    $(".Button").click(function(){
    if($(this).html() == "-"){
            $(this).html("+");
            }
    else{
            $(this).html("-");
            }
            $(".box").slideToggle();
            });
    </script>

    <img class="PhotoPostImage" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
        <!-- Some more code -->
    </div>
    </div>
    </div>
    </div>

当我点击最小化按钮时，它会使每张照片的最小化和最大化次数与照片帖子一样多，而不是最小化按钮所在的照片帖子。

提前致谢！

Answer 1

更改

$(".box").slideToggle();

到

$(this).siblings(".box").slideToggle();

希望这会对你有所帮助

Answer 2

更改

      $(".box").slideToggle();

到

      $(this).next('.box').slideToggle();

.next('.box')
.closest('box')
.siblings('.box')

一切都应该有效

请注意，图标html仅针对点击的div进行了更改，因为您使用了$(this)，但之后您使用slideToggle()类

对所有内容调用了box

Answer 3

您的代码使用$('.box')，它匹配页面中任何位置的box类的每个元素。相反，只选择与单击的按钮相同的PhotoWrapper中的一个：

$(this).closest('.PhotoWrapper').find('.box').slideToggle();

顺便说一下，我建议使用正确的减号（HTML中的 - ，−，JavaScript中的\u2212），因为它会直观地匹配它替换的加号：-连字符通常显示越来越小。

$(this).html('\u2212');

最小化按钮最小化每个div而不是单个div

3 个答案: