0

ここにある jQuery Tools Tooltip プラグインを使用しています。これは意図された動作です: 3 つの要素 (この場合はdivs) があり、クリックするとツールチップがポップアップします。このツールチップは、CSS によって非表示になっているページ上の別の div です。ポップアップ表示されたら、ユーザーがdivツールチップ内のいずれか (またはそれが不可能な場合はツールチップ自体の内側) をクリックするか、他の最初の 3 つdivの s のいずれかをクリックするまで、表示されたままにする必要があります。

問題: これを行うと、予期しない動作が発生します。たとえば、最初divにクリックすると (どれに関係なく)、期待どおりに機能します。ツールチップがポップアップし、その中または他divの s のいずれかをクリックしない限り、表示されたままになります。ただし、別の のためにもう一度行うとdiv、マウスが領域を離れると消えdivます。最初にクリックしたものは問題なくクリックできます...

ここで何が問題なのかわかりません。=/

以下のテストコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
<head>
    <title>Tool Tip Demo</title>
    <link rel='stylesheet' type='text/css' href='style/style.css' />
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='jquery.tools.min.js'></script>

    <style>
    .box2 {
        display: inline-block;
        margin: 5px;
        padding: 3px;
        width: 64px;
        height: 64px;
        line-height: 64px;
        background-color: green;
        text-align: center;
    }
    #tooltip { 
        display: none;
        width: 300px;
        height: 150px;
        overflow: auto;
        background-color: pink;
    }
    </style>
</head>

<body>
    <h1>Tool Tip Demo</h1>
    <script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        $('.tooltip').tooltip({ 
            events: { 
                def: "click, mouseout",
                tooltip: "mouseenter, click"            
            },
            tip: '#tooltip'}).dynamic({ bottom: { direction: 'down'} });
    });
    </script>

    <div style='padding: 1em; width: 450px; margin: 0 auto;'>
            <div  class='tooltip box2'>
                Div
            </div>
            <div  class='tooltip box2'>
                Div
            </div>
            <div class='tooltip box2'>
                Div
            </div>
    </div>

    <div id='tooltip'>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
    </div>
</body>
</html>
4

0 に答える 0