0

閉じるボタンを使用して、さまざまなリンクでdivを切り替えています。残念ながら、閉じるボタンは絶対位置にリンクされているため、div自体に接続されていないため、本来の動作をしていません。私がそれをposition：relativeに置くと、新しいオープニングごとにdivに新しいボタンが追加されます。これはピーナッツに違いない、と私は知っているが、私の知識は非常に基本的なものなので、助けていただければ幸いです。ありがとうMrGreen

脚本

$(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

私が理解しているように、あなたはターゲットを削除したいと思います。それはうまくいくはずです、divnext()の代わりに使用parent()して要素の前に挿入してください：

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

simplifedサンプル：http ：//jsfiddle.net/oceog/tASL5/

于 2012-11-09T16:40:07.327 に答える
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 に答える