Question

我通过关闭按钮在各种链接上切换div。不幸的是，关闭按钮的行为并不像它应该的那样，因为它与绝对位置相关联，因此没有连接到div本身。当我把它放在适当位置时：相对，它会在每个新开口的div中添加一个新按钮。这一定是花生，我知道，但是我的知识非常基础，所以非常感谢帮助！谢谢MrGreen

SCRIPT

$(function(){
    $(".action").click (function(){
        var $this = $(this);
        var target = $this.data('content');

        $('.action').not($this).each(function(){
            var $other = $(this);
            var otherTarget = $other.data('content');
            $(otherTarget).hide(400);
        });

        var cls = $('<div/>', {
            'style':'left:843px;top:15px;width:12px;height:18px;cursor:pointer;padding:3px;position:absolute;border:solid gray 0px;background-color:',
            'id':'cls',
            'text':'x',
            'title':'Close',
            'click':function(){
                var t=$(this);
                t.parent().hide(400, function(){
                    t.remove();
                });
            }
        });

        $(target).prepend(cls).show({height: "toggle"},400);
    });
});

Answer 1

为什么要继续添加/删除关闭按钮？

我建议你使用这样的东西：

$(document).on('click', ".action", function() {
    var $this = $(this);
    var target = $this.data('content');
    $(target).toggle();

    $('.action').not($this).each(function() {
        var $other = $(this);
        var otherTarget = $other.data('content');
        $(otherTarget).hide(400);
    });

    $(document).on('click', '.close', function(){
        $(this).parent().hide(400);
    });

});

此处的完整示例：http://jsfiddle.net/EMYFt/5/

这样，您可以保持HTML完好无损，只需切换元素可见性以响应链接/关闭按钮上的点击次数。

Answer 2

据我了解，您想删除目标。这应该有效，只需使用next()而不是parent() div并在元素前插入：

$(function(){

$("div.action").click (function(){
var $this = $(this);
var target = $this.data('content');
$('div.action').not($this).each(function(){
    var $other = $(this);
    var otherTarget = $other.data('content');
    $(otherTarget).hide(400);
});
var cls=$('<div/>', {
   'style':'left:843px;top:15px;width:12px;height:18px;cursor:pointer;padding:3px;position:absolute;border:solid gray 0px;background-color:',
   'id':'cls',
   'text':'x',
   'title':'Close',
   'click':function(){
        var t=$(this);
        t.next().hide(400, function(){
            t.remove();
        });
    }
});
$(target).before(cls).show({height: "toggle"},400);
});
});

简化示例：http://jsfiddle.net/oceog/tASL5/

Answer 3

尝试这样的事情：

$(function(){
    $(".action").on("click", function(e) {
        var $targ = $(this).data("content");

        $(".action").not($(this)).each(function(i) { $($(this).data("content")).stop().hide(400); });

        //  you should really consider adding a class and changing the jQuery styleing to be a style on a style sheet or in head
        if ($targ.children(".cls") == 0) {  //  cls element does not exist
            $targ.prepend(
                $("<div />").prop({ id: "cls", title: "Close" })
                    .addClass("cls")    //  this is par my suggestion to add a class name variable
                    .css({ left: '843px', top: '15px', width: '12px', height: '18px', cursor: 'pointer', padding: '3px', position: 'absolute', border: 'solid gray 0px', background-color: 'white' }) // not needed if you take my suggestion
                    .text("x")
            );
            $targ.children(".cls").click(function(e) {
                $(this).parent().stop().hide(400, function(e) {
                    //  $(this).children(".cls").remove();
                    //  why remove this?
                });
            });
        };

        $targ.show({ height: "toggle" }, 400);
    });
})

div上的关闭按钮

3 个答案: