我是一名设计师试图找到我的jQuery可折叠div问题的修复程序。 (我是jQuery的新手,但我对html和CSS有很好的处理)。我似乎无法在论坛中找到我正在寻找的内容,所以我给了他一个机会。希望有人可以帮助我。
我有一个带标题标签的面板和2 divs
。我希望在面板选项卡中具有打开/关闭触发器(带图形),并且在目标时仅关闭第二个div。我希望第一个div
始终显示,第二个div
是我在面板标签中选择按钮时要打开/关闭的选项。
我正在使用Ramin 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++;
});
};
答案 0 :(得分:1)
我根本不会使用那个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");
}
});
});
答案 1 :(得分:1)
我使用了以下jquery:
$('#toggle').on('click', function(){
if($('#toggle').text()==='Open'){
$('#collapsible').slideUp();
$('#toggle').text('Close');
}else{
$('#collapsible').slideDown();
$('#toggle').text('Open');
}
});
你可以在这个小提琴中看到它:http://jsfiddle.net/yhTpW/