1

我正在创建一个 JQuery 插件来在某个 div 之间切换。我有一个可见的 div，您可以单击它来切换隐藏的 div。我让隐藏的 div 出现，但是当我点击隐藏的 div 时它消失了。即使单击隐藏的 div，如何使隐藏的 div 显示并保持可见？

这是我的代码。

HTML：

<html>
<head>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type='text/javascript' src='script.js'></script>
</head>
<body>  

<div id="clickable_box" class="tooltip4"></div>

<script type="text/javascript">  
$('div.tooltip4').tooltip()
</script>       

</body>  
</html>

CSS：

#appearing_box {  
display: none; 
border: 1px solid #BFBFBF;
height: 50px;
width: 150px;
}  

#clickable_box {
height: 50px;
width: 50px;
border: 1px solid black;
}

查询：

(function($){  
$.fn.tooltip = function(options) {  

    this.each(function() {  
        var $this = $(this); 
        var $box = $('<div id="appearing_box"> <form><textarea>When?</textarea><form> </div>');     

            $this.click(function() {  
                $($box)
                .appendTo($this)  
                .css({
                backgroundColor: '#0099ff' 
                }),   
                    $box.toggle();   
            });     
    });    
};  
})(jQuery);
4

2 回答 2

0

因为你的appering_box div在里面.tooltip..点击appering_box正在调用.tooltip点击..所以尝试appearing_boxe.pstopPropagation()点击功能来停止事件气泡..

试试这个

$.fn.tooltip = function(options) { 
  ...  
 //your codes
};
$(".tooltip4").on('click', "#appearing_box",function(e) {
  e.stopPropagation();
})

在这里工作小提琴

于 2013-04-03T20:03:11.430 回答
0

将以下委托事件句柄附加到您的代码：

$this.on('click', '#appearing_box', function (e) {
    e.stopPropagation();
});

这是小提琴。

于 2013-04-03T20:07:26.893 回答