如何在第二次點擊時關閉水平手風琴的標籤？

Question

所以我有這個水平滑塊，我已經修改，以適應我的需要，作者做的一些DOM遍歷的東西有點混淆。我試圖完成的是讓這些標籤是'可關閉的'，這樣一旦標籤被打開，他們可以通過再次點擊而恢復到之前的狀態。我覺得這應該很容易，但是我通過搞亂jQuery所做的每件事都導致了各種錯誤。

這裏是小提琴：

http://jsfiddle.net/GxFan/8/

這是手風琴的基本機制：

$("div.slide div.handle").click(function() { 

    if ($(this).parent("div.slide").hasClass("opened")) { 

     $(this).siblings().css({ 
      "opacity": "1" 
     }); 
     var e = $(this).parent("div.slide"); 
     var p = e.prevAll("div.slide.opened"); 
     var ph = p.children("div.handle").children('.handle-arrow').children("img"); 
     var pi = p.children("div.inside"); 
     //e.children("div.inside").animate({"margin-left":"-883px"}, 1000); 
     pi.animate({ 
      "margin-left": "-400px" 
     }, 800, function() { 
      ph.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"); 
      //e.css({"width":"39px"}); 
      pi.css({ 
       "width": "39px" 
      }); 
      //e.children("div.inside").css({"width":"0px", "margin-left":"0px"}); 
      pi.css({ 
       "width": "0px", 
       "margin-left": "0px" 
      }); 
      //e.removeClass("opened"); 
      p.removeClass("opened"); 
     }); 
     //e.children("div.handle").children('.handle-arrow').children("img").animate({rotate: '+=180deg'}, 1000); 
     ph.rotate('0deg'); 

    } else { 
     $(this).siblings().css({ 
      "opacity": "1" 
     }); 
     var e = $(this).parent("div.slide"); 
     var n = e.nextAll("div.slide:not(.opened)"); 
     var ei = e.children("div.inside"); 
     var ni = n.children("div.inside"); 
     var eh = e.children("div.handle").children('.handle-arrow').children("img"); 
     var nh = n.children("div.handle").children('.handle-arrow').children("img"); 
     $(this).parent("div.slide").siblings().children('.inside').css({ 
      "opacity": "0" 
     }); 
     e.css({ 
      "width": "270px" 
     }); 
     n.css({ 
      "width": "270px" 
     }); 
     ei.animate({ 
      "width": "230px", 
      "margin-left": "0px" 
     }, 800); 
     ni.animate({ 
      "width": "230px", 
      "margin-left": "0px" 
     }, 800); 
     eh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"); 
     nh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"); 
     eh.rotate('180deg'); 
     nh.rotate('180deg'); 
     e.addClass("opened"); 
     n.addClass("opened"); 
     e.addClass("opened2"); 
     n.addClass("opened2"); 

     $(".initial-image").clearQueue().stop(true, false); 
    } 

非常感謝事先向任何人誰可以給我提供一些見解，並我很抱歉，如果這不是正確的地方。

最佳， 庫珀

Answer 1

Here is what you're looking for

我不得不if語句添加另一個，並使用添加opened2類的你的想法得到它的運作

這裏是更新的jQuery

$(function() { 

    $("div.slide div.handle").click(function() { 
     if ($(this).parent("div.slide").hasClass("opened") && !$(this).parent("div.slide").hasClass("opened2")) { 
      $(this).siblings().css({ 
       "opacity": "1" 
      }); 
      var e = $(this).parent("div.slide"); 
      var p = e.prevAll("div.slide.opened"); 
      var ph = p.children("div.handle").children('.handle-arrow').children("img"); 
      var pi = p.children("div.inside"); 
      //e.children("div.inside").animate({"margin-left":"-883px"}, 1000); 
      pi.animate({ 
       "margin-left": "-400px" 
      }, 800, function() { 
       ph.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"); 
       //e.css({"width":"39px"}); 
       pi.css({ 
        "width": "39px" 
       }); 
       //e.children("div.inside").css({"width":"0px", "margin-left":"0px"}); 
       pi.css({ 
        "width": "0px", 
         "margin-left": "0px" 
       }); 
       //e.removeClass("opened"); 
       p.removeClass("opened"); 
      }); 
      //e.children("div.handle").children('.handle-arrow').children("img").animate({rotate: '+=180deg'}, 1000); 
      ph.rotate('0deg'); 
      $(this).parent("div.slide").addClass("opened2"); 
      $(this).parent("div.slide").siblings().removeClass("opened2"); 

     } else if ($(this).parent("div.slide").hasClass("opened2")) { 
      $(this).parent("div.slide").removeClass("opened2"); 
      $(this).siblings().css({ 
       "opacity": "1" 
      }); 
      var e = $(this).parent("div.slide"); 
      var p = e.prevAll("div.slide.opened").andSelf(); 
      var ph = p.children("div.handle").children('.handle-arrow').children("img"); 
      var pi = p.children("div.inside"); 
      //e.children("div.inside").animate({"margin-left":"-883px"}, 1000); 
      pi.animate({ 
       "margin-left": "-400px" 
      }, 800, function() { 
       ph.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"); 
       //e.css({"width":"39px"}); 
       pi.css({ 
        "width": "39px" 
       }); 
       //e.children("div.inside").css({"width":"0px", "margin-left":"0px"}); 
       pi.css({ 
        "width": "0px", 
         "margin-left": "0px" 
       }); 
       //e.removeClass("opened"); 
       p.removeClass("opened"); 
      }); 
      //e.children("div.handle").children('.handle-arrow').children("img").animate({rotate: '+=180deg'}, 1000); 
      ph.rotate('0deg'); 
      var next = $(this).parent("div.slide").next("div.slide"); 
      if (next.length > 0) { 
       next.addClass("opened2").children("div.inside").css({ 
        "opacity": "1" 
       }); 
      } 
     } else { 
      $(this).siblings().css({ 
       "opacity": "1" 
      }); 
      var e = $(this).parent("div.slide"); 
      var n = e.nextAll("div.slide:not(.opened)"); 
      var ei = e.children("div.inside"); 
      var ni = n.children("div.inside"); 
      var eh = e.children("div.handle").children('.handle-arrow').children("img"); 
      var nh = n.children("div.handle").children('.handle-arrow').children("img"); 
      $(this).parent("div.slide").siblings().children('.inside').css({ 
       "opacity": "0" 
      }); 
      e.css({ 
       "width": "270px" 
      }); 
      n.css({ 
       "width": "270px" 
      }); 
      ei.animate({ 
       "width": "230px", 
        "margin-left": "0px" 
      }, 800); 
      ni.animate({ 
       "width": "230px", 
        "margin-left": "0px" 
      }, 800); 
      eh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"); 
      nh.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"); 
      eh.rotate('180deg'); 
      nh.rotate('180deg'); 
      e.addClass("opened"); 
      n.addClass("opened"); 
      $(this).parent("div.slide").addClass("opened2"); 
      $(this).parent("div.slide").siblings().removeClass("opened2"); 

      $(".initial-image").clearQueue().stop(true, false); 
     } 
    }); 

}); 

箭頭在您的或我的版本中運行不正常， （或更適合你自己修復）

我也可能會推薦動畫.inside的不透明度，如果它運行良好，它將被顯示/刪除。它會只是採取更換相關.css下載到.animate小號

它沒有打破幾次對我來說，雖然我不能找出原因

注意：jQuery的新版本中，你需要將.andSelf()更改爲.addBack()