0

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

脚本

$(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);
    });
});
4

3 回答 3

2

你为什么一直添加/删除关闭按钮？

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

$(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 完整，并且只需切换元素可见性以响应点击链接/关闭按钮..

于 2012-11-09T16:38:37.190 回答
0

尝试这样的事情：

$(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);
    });
})
于 2012-11-09T16:52:50.033 回答
0

据我了解，您想删除目标。这应该可以，只需使用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/

于 2012-11-09T16:40:07.327 回答