0

Web ユーザー コントロールに JavaScript があり、ページ上でそのコントロールの 2 つのインスタンスをインスタンス化します。コントロールは、ヘルプ テキストを表示するためのものであり、開くか閉じるかを切り替える必要があります。

document.ready 関数は、2 回実行されるという点で期待どおりに動作します。ただし、いずれかのコントロールをクリックすると、スクリプトが 2 回実行されるため、コントロールが開いてから閉じます。

クリックされたコントロールに対してスクリプトが 1 回だけ実行されるようにするにはどうすればよいですか。

<div class="helpControlHolder">
    <div class="expandableHeading">Show (Hide) </div>
    <div class="expandableContent commentsTable" >
        <ul id="ulComments" runat="server"></ul>
    </div>
</div>

<script type="text/javascript">
    function slideToggle(e, ui) {
            debugger;
            //find the right control to slideToggle
            var ct = e.currentTarget;
            var controlHolder = ct.parentNode;  //up the dom one element
            $(controlHolder).find(".expandableContent").slideToggle(500); //back down the dom to the element we want to animate

    }

    $(document).ready(function () {
        //find the right control to hide
        var pare = $('.helpControlHolder');
        pare.find(".expandableContent").hide();

        pare.find(".expandableHeading").click(function (e, ui) {
            e.preventDefault();
            slideToggle(e, ui);
        });
    });
</script>
4

2 に答える 2

0

問題は (@UmairP が指摘したように) スクリプトがページに 2 回追加されていたことです。スクリプトを別のファイル (helpControl.js) に移動し、使用していたマスター ページの [サイト スクリプト] セクションに次のエントリを追加しました。

<%--Site Scripts--%>
<asp:ScriptReference Path="~/Scripts/C/helpControl.js" />

これは、一度だけ追加され、期待どおりに実行されることを意味します。

返信ありがとう

于 2013-08-07T16:06:19.987 に答える