div显示问题与jq

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

当链接2被点击时，只有div 2会受到影响。

这里有什么问题？

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

来源

2013-04-15 Hush Pro

的“取消（）“功能两次。你可以重命名第二个“取消选择2”，但有一个更好的方法来做到这一点。

而不是给链接唯一ID，给他们相同的类（说“联系”）。然后，您可以轻松地为它们分配相同的点击事件处理程序。然后重写“取消选择（）”函数，将链接作为参数。要将“messagepop”div与链接关联起来，可以给它们一个唯一的id，然后将链接的hrefs设置为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

更新质疑COMMENT

如果您只想之一<div>小号可见一次只能打开一个，你可以跟踪哪一个可见并隐藏它，然后再显示另一个可见，但是更容易隐藏它们。 <div>都有“messagepop”类，所以很容易选择它们。

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

注意：如果我们用.hide()隐藏它们，我可能会使用'.messagepop'的选择和隐藏所有的人，但由于.slideFadeToggle()切换他们，我'.messagepop:visible'去限制的触发只是可见的人。

来源

2013-04-15 04:49:41

这是一个很棒的方式来做到这一点！谢谢@约翰，但是我会添加什么来使一次只能弹出一个？非常感谢 –

@Hush Pro - 我更新了我的答案。我希望它能回答你的问题。 –

非常感谢@约翰非常感激，清除了这一点。 –

您声明2次取消！如此明显的第二个覆盖第一

做一个插件

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

然后绑定一次你2接触（把一个类来他们）然后用您已经定义$(this)

来源

2013-04-15 04:44:49 mikakun

div显示问题与jq

回答

相关问题