jQuery的切換不靈/ 2類（多級選擇？）

我的代碼是在這裏：http://jsfiddle.net/GwUmb/4/jQuery的切換不靈/ 2類（多級選擇？）

$(document).ready(function(){ 
    $(".trigger,.trigger-2").click(function(){ 
     $(".panel,.panel-2").toggle("fast"); 
     $(this).toggleClass("active"); 
     return false; 
    }); 
});

我一直在掙扎着從觸發-2加載面板2 ...我發現。觸發器和.panel行爲（有點）如預期（我注意到一些CSS風格的怪異）。

如果我刪除.panel-2和.trigger-2，代碼的表現完美......但否則它不會。

我試圖複製我在這裏讀到的內容：http://www.w3schools.com/jquery/sel_multiple_classes.asp。

來源

2013-04-28 user14696

另一個選項，供您是使用單一類名的鏈接/容器。我已經清理了一下你的代碼，並提供了懸停功能來顯示你的鏈接。這對你來說應該是一個很好的起點。使用list的CSS的方法可能是一種更簡單的方法...

工作的例子就是在這裏http://jsfiddle.net/GwUmb/11/

更新的jQuery：

$(document).ready(function() { 

       //global var to hold the current selected link 
       var $link; 

       $('.trigger').hover(function() { 
        $link = $(this); 
        //get position of clicked link 
        var linkPos = $link.position(); 
        //position & display this links panel 
        $link.toggleClass("active"); 
        $link.siblings('.panel').css({ 
         'top' : linkPos.top 
        }).fadeIn(600); 

       }, function() {//hide the panel on mouseout 
        $link.siblings('.panel').slideUp(600); 
        $link.removeClass('active'); 
       }); 

      }); 
      // end ready

來源

2013-04-29 03:06:38 lukeocom

@ lukeocom。哇！這是非常光滑的......感謝CSS列表提示......非常感謝...... – user14696 2013-04-29 03:35:54

不用擔心！我也爲你清理了CSS - http://jsfiddle.net/GwUmb/11/ – lukeocom 2013-04-29 04:00:43

的這裏的問題是，無論哪個觸發你點擊，都（或全部）面板將被激活，因爲你選擇他們兩個，並呼籲他們.toggle。有很多方法可以解決這個問題，例如將面板的相應索引存儲在觸發器中，如data或使用索引。後者可能適合你。

$(".trigger").click(function(e) { 
    $(".panel").eq($(this).index(".trigger")).toggle("fast"); 
    $(this).toggleClass("active"); 
    e.preventDefault(); 
});

http://jsfiddle.net/GwUmb/6/

來源

2013-04-28 23:30:50

有趣。這有助於......謝謝！ – user14696 2013-04-29 03:38:29

jQuery的切換不靈/ 2類（多級選擇？）

回答

相關問題