我正在创建一个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;
}
JQuery的:
(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);
答案 0 :(得分:0)
因为您的appering_box div位于.tooltip
内... appering_box
上的点击正在调用.tooltip
点击..因此请在appearing_box点击功能上尝试e.pstopPropagation()
以停止活动气泡..
试试这个
$.fn.tooltip = function(options) {
...
//your codes
};
$(".tooltip4").on('click', "#appearing_box",function(e) {
e.stopPropagation();
})
答案 1 :(得分:0)
将以下委托事件句柄附加到您的代码中:
$this.on('click', '#appearing_box', function (e) {
e.stopPropagation();
});
这是the fiddle。