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

回答

相關問題