1

アコーディオンにクリックイベントを実装しています。アコーディオンには、リンクとヘルプ イメージがあります。ユーザーがリンクをクリックすると、アコーディオンのみが展開されます。ユーザーがヘルプ画像をクリックすると、アコーディオンを展開せずにツールヒントのヘルプ メッセージが表示されます。

リンクのクリック イベントは、ページを読み込んだときの最初のクリックで非常にうまく機能します。ページをロードしてからヘルプ画像をクリックすると問題が発生します。アコーディオンを展開せずにヘルプメッセージのみを表示しますが、ユーザーがアコーディオンのラベルをクリックして展開すると、ユーザーがクリックしない限り起動しません二度。

アコーディオンのスクリーン キャプチャ

ユーザーが [全般] または [連絡先] をクリックすると、それぞれのアコーディオンが展開されます (これはうまく機能します)。ユーザーが右側の画像をクリックすると、アコーディオンを展開せずにヘルプ ツールチップが読み込まれます (これもうまく機能しますが、ユーザーがヘルプ画像をクリックしてから [一般] または [連絡先] をクリックすると、それぞれのアコーディオンは 2 回のクリック後にのみ読み込まれます)。 .) ワンクリックでロードできるようにしたい。

これは私のasp.netコードです:

<ul>
<li id="function_contents_0" runat="server">
   <a href="javascript:;" id="function_0" class="accordion_functions_inactive" style="height:16px; width:95%;">
   <asp:Label ID="Label_Company_General" runat="server" Text="General" style="float: left;">
   </asp:Label>
   <span style="float: right; text-align: right; background-image:url('../assets/images/help.png'); width:16px; height:16px;" class="tooltip" title="This is help">
   </span>
   </a>
   <div class="function_contents" id="content_function_0">
   //some more code here
   </div>
</li>

<li id="function_contents_1" runat="server">
    <a href="javascript:;" id="function_1" class="accordion_functions_inactive" style="height:16px; width:95%;">
    <asp:Label ID="Label_Company_Contact" runat="server" Text="Contact" style="float: left;">
    </asp:Label> 
    <span style="float: right; text-align: right; background-image:url('../assets/images/help.png'); width:16px; height:16px;" class="tooltip" title="Am a second help">
    </span>               
    </a>
    <div class="function_contents" id="content_function_1">
    //some more code here
 </li>

 //The third accordion goes in here

</ul>

JavaScript コード:

//code for expanding accordions

 $("#accordion_functions a").on('click', function () {
    var this_prop = $(this).prop('class');
    var levels;

    if ($(this).attr('id') != undefined) {
        levels = $(this).attr('id').split('_')
    }

    if (this_prop == 'accordion_functions_active') {
        $('#content_function_' + levels[1]).hide();          
        $(this).prop('class', 'accordion_functions_inactive');
    }

    if (this_prop == 'accordion_functions_inactive') {
        $('#content_function_' + levels[1]).show();
        $(this).prop('class', 'accordion_functions_active');
    }

});

//code for showing the tooltip help message

$('#accordion_functions ul li a span:nth-child(2).tooltip').on('click', function () {
    var levels;
    var this_prop = $('#accordion_functions ul li a').prop('class');

    if ($('#accordion_functions ul li a').attr('id') != undefined) {
        levels = $('#accordion_functions ul li a').attr('id').split('_')
    }

    $('#content_function_' + levels[1]).hide();
    $('#accordion_functions ul li a').prop('class', 'accordion_functions_active');
    $('.accordion_functions_active').css('backgroundPosition', '5px -8px');

});

これは私のcssです：

.accordion_functions_inactive {
background-image: url(../images/arrows_white_blue.png);
background-repeat: no-repeat;
background-position: 5px -8px;
}
.accordion_functions_active {
background-image: url(../images/arrows_white_blue.png);
background-repeat: no-repeat;
background-position: 5px 9px;
}

私は何が間違っているのでしょうか？私の目標は、ユーザーがヘルプ メッセージの画像をクリックし、もう一度クリックして閉じるときです。アコーディオンのクリックには影響しません (アコーディオンの展開イベントは 1 回のクリックで発生しますが、2 回のクリックでは発生しません)。

unbind()、、、およびの使用について読みましたがreturn false、問題の解決には役立ちませんでした。なにか提案を？die()preventDefault()stopPropagation()

編集: アコーディオンのスクリーン ショットと詳細な説明を追加しました。

4

1 に答える 1

1

私がこれを正しく読んでいるなら、ここで何が起こっているのですか：

ヘルプ ボタンをクリックすると、次の行が実行されます。

$('#accordion_functions ul li a').prop('class', 'accordion_functions_active');

これにより、accordion_functions_activeクラスがすべてのアコーディオン リンクに追加されます。

アコーディオン コンテンツを表示するための対応する命令がないため、コンテンツとリンク クラスが同期していません。すなわち。クラスはアクティブに設定されていますが、コンテンツはまだ非表示になっています。これが、コンテンツを表示するのに 2 回のクリックが必要な理由です。

最初のクリックで、アクティブなクラスに基づいて既に非表示になっているコンテンツが非表示になり、クラスが非アクティブに設定されます。クラスとコンテンツの表示/非表示の状態が同期され、2 回目のクリックで正常に動作するようになりました。

したがって、これを次のように変更します

$('#accordion_functions ul li a').prop('class', 'accordion_functions_inactive');
$('.function_contents').hide();

または、リンク クラスを変更したり、コンテンツを非表示にしたりしないでください。

于 2013-07-10T12:11:44.467 に答える