0

修改了一个小提琴来做多个，但它有一个错误与多重...当链接 1 被点击时，div 1 和 2 受到影响。

单击链接 2 时，只有 div 2 受到影响。

这里可能是什么问题？

http://jsfiddle.net/bluey/zsMaE/3/

  function deselect() {
        $(".pop").slideFadeToggle(function() { 
            $("#contact").removeClass("selected");
        });    
    }

    $(function() {
        $("#contact").live('click', function() {
            if($(this).hasClass("selected")) {
                deselect();               
            } else {
                $(this).addClass("selected");
                $(".pop").slideFadeToggle(function() { 

                });
            }
            return false;
        });

        $(".close").live('click', function() {
            deselect();
            return false;
        });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };



    function deselect() {
        $(".pop2").slideFadeToggle(function() { 
            $("#contact2").removeClass("selected");
        });    
    }

    $(function() {
        $("#contact2").live('click', function() {
            if($(this).hasClass("selected")) {
                deselect();               
            } else {
                $(this).addClass("selected");
                $(".pop2").slideFadeToggle(function() { 

                });
            }
            return false;
        });

        $(".close").live('click', function() {
            deselect();
            return false;
        });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };
4

2 回答 2

0

您声明 2 次取消选择！所以显然第二个会覆盖第一个

做一个插件

$.fn.extend({deselect : function () {$(this).removeClass('deselect')} });

然后立即绑定您的 2 个联系人（给他们上课）然后使用$(this)

于 2013-04-15T04:44:49.087 回答
0

您已经定义了两次“deselect()”函数。您可以将第二个重命名为“deselect2”，但有更好的方法可以做到这一点。

不要给链接唯一的ID，而是给它们相同的类（比如“联系人”）。然后，您可以轻松地为它们分配相同的单击事件处理程序。然后重写“deselect()”函数，将链接作为参数。要将“messagepop” div 与链接相关联，您可以给它们唯一的 id，然后将链接的 href 设置为 div 的 id。

HTML：

<div class="messagepop" id="pop1">ANYTHING HERE 1</div>
<div class="messagepop" id="pop2">ANYTHING HERE 2</div>
<a href="#pop1" class="contact">Contact Us 1</a>
<a href="#pop2" class="contact">Contact Us 2</a>

JavaScript：

function select($link) {
    $link.addClass('selected');
    $($link.attr('href')).slideFadeToggle(function () {});
}

function deselect($link) {
    $($link.attr('href')).slideFadeToggle(function () {
        $link.removeClass('selected');
    });
}

$('.contact').click(function () {
    var $link = $(this);
    if ($link.hasClass('selected')) {
        deselect($link);
    } else {
        select($link);
    }
    return false;
});

jsfiddle

更新评论中的问题

如果您一次只希望其中一个<div>s 可见，则可以跟踪哪个可见并在使另一个可见之前将其隐藏，但在显示一个之前将它们全部隐藏起来更容易。<div>s 都有“messagepop”类，所以很容易全部选中。

function select($link) {
    $link.addClass('selected');
    $('.messagepop:visible').slideFadeToggle(function () {});
    $($link.attr('href')).slideFadeToggle(function () {});
}

注意：如果我们用 隐藏它们.hide()，我可能会使用'.messagepop'选择器并隐藏所有它们，但是由于.slideFadeToggle()切换它们，我'.messagepop:visible'将切换限制为仅可见的切换。

于 2013-04-15T04:49:41.250 回答