1

我使用了我在博客某处找到的一段 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>

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

提前致谢！

4

3 回答 3

3

改变

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

至

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

希望对你有帮助

于 2013-05-04T19:03:13.897 回答
0

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

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

顺便说一句，我建议使用适当的减号（-，&#x2212;在 HTML 中，\u2212在 JavaScript 中），因为这将在视觉上匹配它所替换的加号：-连字符通常显示得越来越小。

$(this).html('\u2212');
于 2013-05-04T19:18:15.487 回答
0

改变

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

至

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

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

一切都应该工作

请注意，图标 html 仅针对单击的 div 更改，因为您使用了$(this)，但随后您使用类调用slideToggle()了所有内容box

于 2013-05-04T19:01:16.027 回答