Javascript jQuery可折叠div，正在折叠第二个div

我是一名设计师，试图找到解决jQuery可折叠div问题的方法。（我不熟悉jQuery，但我对html和CSS有很好的处理能力）。我似乎在论坛上找不到我想要的东西，所以我尝试一下。希望有人能帮我

我有一个面板，带有标题选项卡和2个

divs

。我希望在面板选项卡中具有打开/关闭触发器（带图形），并且在目标时仅具有第二个div close。我希望第一个

div

始终显示，第二个

div

是我在面板选项卡中选择按钮时要打开/关闭的选项

我使用Ramin Hossaini可折叠

div

code作为起点：

以下是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>

标题#1
我希望此内容始终显示

我想让这个面板折叠并展开

还有我不完全理解的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++;
});

};

jQuery.collapsable=函数（选择器、标识符）{
//在标题后切换div并设置唯一的cookie
$（选择器）。单击（函数（）{
$（this）.next（）.slideToggle（'fast'，function（））{
如果（$（this）.is（“：hidden”））{
$.cookie（$（this.prev（）.attr（“id”），“hide”）；
$（this.prev（）.children（.placeholder”）.removeClass（“collapse”）.addClass（“expand”）；
}
否则{
$.cookie（$（this.prev（）.attr（“id”），“show”）；
$（this.prev（）.children（.placeholder”）.removeClass（“expand”）.addClass（“collapse”）；
}
});
返回false；
}).next（）；
//显示标题是可单击的
$（选择器）.悬停（函数（）{
$（this.css（“游标”、“指针”）；
});
/*
*在document.ready上：模块应该显示还是隐藏？
*/
var idval=0；//用于生成唯一ID的增量
$。每个（$（选择器），函数（）{
$（$（this））.attr（“id”，“module_u3;”+identifier+idval）；//为每个对象指定一个唯一的id
if（！$（$（此））.hasClass（“折叠”））{
$（“#”+$（this.attr（“id”））.append（“”）；
}
else if（$（$（this））.hasClass（“折叠”））{
//默认情况下，此文件应折叠
$（“#”+$（this.attr（“id”））.append（“”）；
}
//开发人员指定了什么？折叠还是扩展？
if（$（$（this））.hasClass（“折叠”））{
$（“#”+$（this.attr（“id”））.next（）.hide（）；
$（#“+$（this）.attr（“id”）.children（“span”）.removeClass（“collapse”）.addClass（“expand”）；
}
否则{
$（#“+$（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（“占位符”）.removeClass（“expand”）.addClass（“collapse”）；
}
idval++；
});
};

我根本不会使用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");
        }
    });
});

---

我使用了以下jquery：

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

---

您可以看到它在这个小提琴中工作：

给定的jquery只影响标题后面的第一个div。使用当前的jquery插件，您将无法获得所需的内容，您需要编写自己的插件或找到另一个插件，以您要切换的div为目标。@Idmo:如何修改该插件以使用图像来打开和关闭？我不想要任何副本，我只想使用图像（1表示打开，1表示关闭）？任何帮助都将不胜感激。