点击两次而不是一次后弹出 div 显示

Question

对不起，这个奇怪的标题，但我不知道任何其他方式来描述它（欢迎改进！）。

我正在尝试制作投资组合网格。当您单击其中一个图像时，其下方会出现一个框，显示有关该项目的一些信息。我已经走了很远，但遇到了一些奇怪的行为。

我的 HTML 如下所示：

<ul class="pfGrid">
    <li>
        <a href="./">
            <img src="image.jpg" />
        </a>
    </li>
    ...
</ul>

我想出了这个 jQuery 脚本来滑入和滑出信息框：

<script>
$(document).ready( function() {
    $(".pfGrid li a").on("click", function(e) {
        // no default action when the link is clicked
        e.preventDefault();

        // hide any infobox that is visible
        $(".pfInfo").slideUp("normal", function() { $(".pfInfo").remove(); } );

        // if the image isn't allready active
        if( !$(this).hasClass("pfActive") ) {
            // remove the active class from the previous active item
            $(".pfGrid li a").removeClass( "pfActive");

            // add the info box, but hide it
            $(this).parent().append('<div style=\"display:none;\" class=\"pfInfo\">blaa<br /><br />bla<br />bla</div>');
            // slide down the infobox
            $(".pfInfo").slideDown();
            // make the image active
            $(this).addClass("pfActive");
        }
        // if the image is active, remove the class (info box is already hidden )
        else {
            $(".pfGrid li a").removeClass( "pfActive");
        }
    });
});
</script>

问题是：当我加载页面并单击第一张图片时，会显示信息框。然后，当我单击第二张图像时，该框会显示但也会立即隐藏。再次单击它，它会显示。然后点击第三张图片，信息框显示，两次后第四张，以此类推……

经过一些调试，我发现问题出在$(".pfInfo").slideUp("normal", function() { $(".pfInfo").remove(); } ); 内。我已经尝试过使用 if-else 等其他结构，但还没有得到答案。

也可以查看JSFiddle。

Answer 1

给你

$(document).ready( function() {
    $(".pfGrid li a").on("click", function(e) {
        e.preventDefault();

        // the problem seems to be in this line:
        $(".pfInfo").slideUp("normal", function() { $(this).remove(); } );
        //partially correct - when the slideUp animation, your previous function used to
        // also remove the newly created .pfInfo element - hence the $(this) replacement

        if( !$(this).hasClass("pfActive") ) {
            $(".pfGrid li a").removeClass( "pfActive");

            $(this).parent().append('<div style=\"display:none;\" class=\"pfInfo\">blaa<br /><br />bla<br />bla</div>');
            $(this).next().slideDown();
                 //second change, again the $('.pfInfo') was replaced with .next()
            $(this).addClass("pfActive");
        }
        else {
            $(".pfGrid li a").removeClass( "pfActive");
        }
    });
});

希望这能给你的问题带来一些启示

PS

小提琴 js 是要走的路：D