Question

我在帐户模块的摘要视图中创建了一个小部件。在这个小部件中，我想使用slideToggle来显示一些细节。有时候代码可以完美地运行，但有时它可以翻转并立即关闭细节。

JS：

    $(document).ready(function() {
        $('.potential_single_title').on('click',function(e) {
            $(this).parent().find('.potential_comment_list').slideToggle('slow');
        });
    });

TPL：

<script src="resources/ChildCommentScript.js"></script>
<link rel="stylesheet" type="text/css" href="resources/ChildCommentStyle.css">

{strip}
    <div class="potential_comment_container">
    {foreach from=$OPP key=K item=POT}
        <br />
        <div class="potential_single">
            <div class="potential_single_title">
                <strong>{$POT[1]}</strong> <span class="potential_assignee">Assigned to : {$POT[2]}</span>
            </div>
            <hr>
            <div class="potential_comment_list">
                <div class="commentContainer">
                {foreach from=$COM[$K] item=POTCOM}
                    <div class="commentDetails" style="width:100%;">
                        <div class="span1">
                            <img class="alignMiddle pull-left" src="layouts/vlayout/skins/images/DefaultUserIcon.png">
                        </div>
                        <span class="commentorName"><strong> {$POTCOM[0]}</strong></span>
                        <span class="pull-right"><p class="muted"><small>{$POTCOM[1]}</small></p></span>
                        <div class="commentInfoContent">{$POTCOM[2]}</div>
                    </div>
                {/foreach}
                </div>
            </div>
        </div>
    {/foreach}
    </div>
{/strip}

Answer 1

幻灯片切换的用法似乎是正确的。我怀疑点击有时会发生两次，导致再次滑动。如果发生幻灯片操作，修改JS以拒绝点击可能会解决问题。

$(document).ready(function() {
    var sliding = false;
    $('.potential_single_title').on('click',function(e) {
        if(sliding) return false;
        sliding = true;
        $(this).parent().find('.potential_comment_list').slideToggle('slow', function() {sliding = false;});
    });
});

包含滑动时拒绝点击操作的简单标记！

Answer 2

这只是为了说明如何查看点击是否发生两次。

 $(document).ready(function() {
            $('.potential_single_title').on('click',function(e) {
                console.log("clicked")
            });
        });

一次点击..如果在控制台中你看到点击了两次，你可以认为你的触发器很开心; - ）

尝试将调试器放在那里......可以突出显示内容

$(document).ready(function() {
                $('.potential_single_title').on('click',function(e) {
                    console.log("clicked");
debugger;
                });
            });

在chrome中，必须打开调试器控制台才能使其进入调试器行。

只是想排除愚蠢的事情..这是一对一的页面上没有其他的js ...就像你的包装$（文件）.ready（两次或者什么东西，只是havnt包括那个代码在问题

Vtiger - Jquery slideToggle随机切换两次

2 个答案: