0

私は、jQuery の折りたたみ可能な div の問題を解決しようとしているデザイナーです。(私は jQuery は初めてですが、html と CSS についてはよく理解しています)。フォーラムで探しているものを正確に見つけることができないようですので、これを試してみます. うまくいけば、誰かが私を助けてくれます。

ヘッダータブと 2 を持つパネルがありますdivs。パネルタブにオープン/クローズトリガー(グラフィック付き)があり、ターゲットにされたときに2番目のdivのみを閉じる必要があります。1 つ目divは常に表示したい、2つ目divはパネル タブでボタンを選択するときに開閉したいオプションです。

div出発点として、Ramin Hossaini の折りたたみ可能なコードを使用しています。

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++;
});

};
4

2 に答える 2

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");
        }
    });
});
于 2013-10-23T17:24:46.727 に答える