jQuery可摺疊的div，摺疊第二格

我是一個設計師，試圖找到我的jQuery可摺疊div問題的修復。（我是新來的jQuery，但我有一個很好的處理HTML和CSS）。我似乎無法在論壇中找到我正在尋找的內容，所以我正在爲此做好準備。希望有人能幫助我。jQuery可摺疊的div，摺疊第二格

我有一個面板的標題標籤和2 divs。我希望在面板選項卡中具有打開/關閉觸發器（帶圖形），並且在有針對性時只關閉第二個div。我想第一個div總是顯示，第二個div是我想要在面板選項卡中選擇一個按鈕時打開/關閉的選項。

我使用拉敏Hossaini可摺疊div代碼爲出發點：

這裏的CSS：

h1 { 
    margin-top:20px; 
    margin-bottom:20px; 
} 

p { 
    margin-bottom:10px; 
} 

.module { 
    border:1px solid #ccc; 
    width: 400px; 
    margin-bottom:20px; 
} 

.module .header { 
    background-color:#efefef; 
    padding-left:10px; 
} 

.module .header h1 { 
    margin:0; 
    display:inline; 
    font-size:16px; 
} 

.module .content{ 
    clear:both; 
    padding:10px; 
} 

.module .placeholder { 
    margin-top:1px; 
    margin-right:2px; 
} 

.module .expand { 
    float:left; 
    display:inline; 
    background-image:url(../images/toggle-sprite.png); 
    background-position: 0px -16px; 
    width:16px; 
    height:16px; 
} 

.module .collapse { 
    float:left; 
    display:inline; 
    background-image:url(../images/toggle-sprite.png); 
    background-position: 0px 0px; 
    width:16px; 
    height:16px; 
    padding-left: 20px; 
    background-repeat: no-repeat; 
}

這裏是我的HTML：

<div class="panel module"> 

<div class="panelTab header"> 
    <h1>Header #1</h1> 
</div> 

<div class="content 1"> 
      <p>I want this content to always show.</p> 
    </div> 

<div class="content 2"> <!-- the 'content' class is only for styling --> 
    <p>I want this panel to collapse and expand.</p> 
</div> 

</div>

而jquery其中我不完全理解：

jQuery.collapsible = function(selector, identifier) { 

//toggle the div after the header and set a unique-cookie 
$(selector).click(function() { 
    $(this).next().slideToggle('fast', function() { 
     if ($(this).is(":hidden")) { 
      $.cookie($(this).prev().attr("id"), 'hide'); 
       $(this).prev().children(".placeholder").removeClass("collapse").addClass("expand"); 
     } 
     else { 
      $.cookie($(this).prev().attr("id"), 'show'); 
      $(this).prev().children(".placeholder").removeClass("expand").addClass("collapse"); 
     } 
    }); 
    return false; 
}).next(); 


//show that the header is clickable 
$(selector).hover(function() { 
    $(this).css("cursor", "pointer"); 
}); 

/* 
* On document.ready: should the module be shown or hidden? 
*/ 
var idval = 0; //increment used for generating unique ID's 
$.each($(selector) , function() { 

    $($(this)).attr("id", "module_" + identifier + idval); //give each a unique ID 

    if (!$($(this)).hasClass("collapsed")) { 
     $("#" + $(this).attr("id")).append("<span class='placeholder collapse'></span>"); 
    } 
    else if ($($(this)).hasClass("collapsed")) { 
     //by default, this one should be collapsed 
     $("#" + $(this).attr("id")).append("<span class='placeholder expand'></span>"); 
    } 

    //what has the developer specified? collapsed or expanded? 
    if ($($(this)).hasClass("collapsed")) { 
     $("#" + $(this).attr("id")).next().hide(); 
     $("#" + $(this).attr("id")).children("span").removeClass("collapse").addClass("expand"); 
    } 
    else { 
     $("#" + $(this).attr("id")).children("span").removeClass("expand").addClass("collapse"); 
    } 


    if ($.cookie($(this).attr("id")) == 'hide') { 
     $("#" + $(this).attr("id")).next().hide(); 
     $("#" + $(this).attr("id")).children("span").removeClass("collapse").addClass("expand"); 
    } 
    else if ($.cookie($(this).attr("id")) == 'show') { 
     $("#" + $(this).attr("id")).next().show(); 
     $("#" + $(this).attr("id")).children(".placeholder").removeClass("expand").addClass("collapse"); 
    } 


    idval++; 
}); 

};

來源

2013-10-23 Elarie

給定的jquery隻影響頭後的第一個div。使用這個jquery插件，你不會得到你想要的，你需要編寫你自己的或者找到另一個將針對你想要切換的div。 – Gobo

我用以下的jQuery：

$('#toggle').on('click', function(){ 
    if($('#toggle').text()==='Open'){ 
     $('#collapsible').slideUp(); 
     $('#toggle').text('Close'); 
    }else{ 
     $('#collapsible').slideDown(); 
     $('#toggle').text('Open'); 
    } 
});

你可以看到它在這個小提琴woking：http://jsfiddle.net/yhTpW/

來源

2013-10-23 17:32:13 ldmo

@Idmo：這怎麼可以修改爲使用圖像打開和關閉？我不想要任何副本，我只想使用圖像（打開1個，關閉1個）？任何幫助將不勝感激。 – Elarie

我不會使用jQuery代碼在所有，而是一個更簡單的一個：

jQuery(function(){ 
    jQuery(".panel .panelTab").css("cursor","pointer").click(function(){ 
     if(jQuery(".panel .2").toggle().is(":visible")){ 
      jQuery(this).removeClass("collapse").addClass("expand"); 
     } else { 
      jQuery(this).removeClass("expand").addClass("collapse"); 
     } 
    }); 
});

來源

2013-10-23 17:24:46 Costel

jQuery可摺疊的div，摺疊第二格

回答

相關問題