-1

我创建了一个jQuery菜单，单击一个小图标时将打开该菜单。此菜单包含一些可点击的链接和一个链接，它将执行一些 js 操作并在同一菜单中创建一个新的文本框。但是当我点击链接时，菜单会自动关闭。因此，即使显示了一个文本框，在我们再次单击该图标以查看菜单之前，也无法看到它。

这是一个演示：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

您需要阻止“单击”事件使 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 回答
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 回答