1

fadeToggle 在静态 HTML 元素上工作正常： HTML：

<div id="wrapper" style="
position: relative;
display: inline-block;
width: 116px;
height: 116px;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg') no-repeat;
">
<img id="cover" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Example.png/116px-Example.png" />
</div>

查询：

$("#wrapper").click(function() {
    $("#cover").fadeToggle("slow");
});

http://jsfiddle.net/BishKopt/zFq5P/1/

但是当我尝试用 JQuery 添加包装器时......

HTML：

<img id="cover" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Example.png/116px-Example.png" />

查询：

$wrapper = $('<div></div>');
$wrapper.attr('id', 'mywrapper');
$wrapper.css({
    position: "relative",
    display: "inline-block",
    width: $("#cover").width(),
    height: $("#cover").height(),
    background: "url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Example.jpg/116px-Example.jpg') no-repeat"
});
$("#cover").wrap($wrapper);

$("#mywrapper").click(function() {
    $("#cover").fadeToggle("slow");
});

http://jsfiddle.net/BishKopt/kazKF/1/

...在第二次切换（第二次单击）之后 - img html 元素被“选中”...您有什么想法可以避免它吗？谢谢！

4

2 回答 2

1

我已经设法用一种“黑客”来解决它......

$("#cover").after($('<a style="display: hidden; position: absolute;" id="hack"></a>'));

$("#mywrapper").click(function() {
    $("#cover").fadeToggle("slow");
    $("#hack").blur();
});
于 2012-11-22T01:13:38.190 回答
1

如果“选择”是指文本选择，请执行以下操作：

CSS：

#mywrapper{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

但是，如果您的意思是您的浏览器在 div 周围添加了不需要的边框，请执行以下操作：

CSS：

#mywrapper{
    outline:none;
}
于 2012-11-17T03:09:50.557 回答