-1

jQuery小さなアイコンをクリックすると開くメニューを作成しました。このメニューには、クリック可能ないくつかのリンクと、いくつかの js アクションを実行して同じメニュー内に新しいテキスト ボックスを作成する 1 つのリンクが含まれています。しかし、リンクをクリックすると、メニューが自動的に閉じます。したがって、テキストボックスが表示されていても、そのアイコンをもう一度クリックしてメニューを表示するまで表示されません。

ここにデモがあります: http://jsfiddle.net/W2exq/1/

jQueryメニューの表示と非表示、およびテキストボックスの表示にいくつかのコードを使用しました。では、メニューの外をクリックして閉じない限り、メニューを開いたままにするにはどうすればよいでしょうか? 他に必要なものがあれば教えてください。

HTML:

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js></script>
        <link rel="stylesheet" type="text/css" href="http://tharunjose.com/stack/style.css" />
</head>
<div class="notes">
    <div class="noteTooltip">
        This link is for the special purpose of the main site.<hr />
        <a class="noteEdit" id="add_btn" href="#">Edit note</a>
        <a class="noteTrash" href="#"></a>
    </div>
</div>​

CSS:

.notes{
    position:relative;
    width:16px;
    height:16px;
    margin:0 auto;
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -228px -34px transparent;
}
.notes:hover{
    cursor:pointer;
    background-position:-207px -34px;
}
.noteTooltip{
    display:none;
    position:absolute;
    top:25px;
    left:-10px;
    width:130px;
    text-align:left;
    line-height:18px;
    border:2px solid #363636;
    z-index:9999;
    background:#fbfbfb;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    padding:10px 10px 6px 10px;
    cursor:auto;
}
.noteTooltip:before{
    content:'';
    position:absolute;
    top:-10px;
    left:10px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:8px solid #000;
    z-index:9999;
}
.noteEdit{
    color:#3ba5d5;
    text-decoration:none;
    float:left;
}
.noteTrash{
    display:block;
    float:right;
    padding:6px;
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -20px -106px transparent;
}​

JS:

$(document).ready(function() {  
    $(document).click(function(e) {
        $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open");
    });
    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });


       var handler_func = function () {
        var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
        var e = document.createElement('input');
        e.type='text';
        e.width=40;
        e.name = 'added'+i;
        this.rel = i+1;
        this.parentNode.appendChild(e);
        return false;       
        }

        var add_btn = document.getElementById('add_btn');
        if(add_btn.attachEvent)
              add_btn.attachEvent('onClick', handler_func);
        else if(add_btn.addEventListener) //Firefox & company
              add_btn.addEventListener('click', handler_func, false);
});

</p>

4

3 に答える 3

2

.noteTooltipにクリックリスナーを追加する必要があります。

$(".noteTooltip").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
});
于 2012-09-18T12:31:29.003 に答える
1

Edit Noteがクリックされたとき、および追加されたテキスト ボックスをクリックしたときに、イベントの伝播を停止する必要があります。

イベントを渡すだけですhandler_func

var handler_func = function (evt)

およびreturn false;同じ関数内の前に追加

e.onclick = function(e1) {
              e1.stopPropagation();
           }
evt.stopPropagation();

そして、それは問題を解決します。

デモ

于 2012-09-18T12:50:40.960 に答える
1

「クリック」イベントが DOM をバブリングして「ポップアップ」メニューを閉じないようにする必要があります。

これは不完全です（複数のテキスト要素を作成できます。すべての作業を行うつもりはありません:P ）が、良い出発点を提供するはずです：

$(document).ready(function() {  
    $(document).click(function(e) {
        $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open");
    });

    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });

    $(".noteTooltip").click(function(e) {
        e.stopPropagation(); //stop the onclick call bubbling up the DOM.
        e.preventDefault(); //stop the onclick call bubbling up the DOM.
    });

    $("#add_btn").click(function(event) {
       var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0,
           element = document.createElement('input');

       event.stopPropagation();  //stop the onclick call bubbling up the DOM.
       element.type='text';
       element.width=40;
       element.name = 'added'+i;
       this.rel = i+1;
       this.parentNode.appendChild(element);
       return false;   
    });

});

event.stopPropagation()イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

イベント バブリングに関するブログ投稿も。

jsFiddle の例。

</p>

于 2012-09-18T12:35:50.090 に答える