2

jQueryのslideToggle（）関数を使用して、Webサイトの展開/折りたたみ機能を制御しています。現在、サイト全体に実装する前に開発されたページは1つだけです。ここにあります。

デフォルトでは、jQuery slideToggle（）はdisplay = "block"を使用しますが、これは役に立ちません。パネルを展開するときは代わりにdisplay="inline-table"を使用し、同じパネルを折りたたむときはdisplay="none"に戻したいのですが。

レイアウトが希望どおりであることを確認するために、CSSに適用した設定がいくつかあります。

.specs {
    width: 930px;
    height: 100px;
    border: none;
    color: #ffffff;
    font-weight: normal;
    display: none;
}

heightプロパティは、パネル内のすべてのアイコンが完全に表示されるようにするために使用されます。これを削除すると、「メモリ」などの小さなパネルでアイコンの半分が切り取られます。

折りたたまれている間、パネルはdisplay = "none"に設定され、レイアウトに影響を与えないようにします。ただし、展開するときは、「Webブラウジング」や「リアカメラ」などのパネルを見たときに現在見られるいくつかの配置の問題を回避するために、 display = "inline-table"に設定する必要があります（基本的に、リストはDIVと重複しています）以下、およびインラインテーブル設定はそれを修正します）。

この問題を修正できたらすぐに、このデザインを他のページに実装することができます。

PS-現在使用されているのはRedsquareの方法なので、拡張は問題ありませんが、折りたたむことは望んでいません。

ありがとう、
ディラン。

4

2 に答える 2

0

slideToggle（）組み込み関数を使用する必要はなく、独自の関数を作成します。

.toggleClass（）を使用します：http：//api.jquery.com/toggleClass/

このようなもの：

css：

.DisplayNone{
   display: none;
}

.DisplayInlineTable{
   display: inline-table;
}

次に、onclickイベントを作成します。

jquery：

$(parent).click(function(){
   $(child).toggleClass("DisplayInlineTable").slideToggle();
});
于 2012-12-10T14:35:04.400 に答える
0

これは私にとってはうまくいくようです。min-heightの代わりに使用height

.specs {
    width: 930px;
    /*min-height: 100px; CHECK UPDATE */
    border: none;
    color: #ffffff;
    font-weight: normal;
    display: none;
}

更新：http：//jsfiddle.net/LLQyV/1/で実際の動作を確認してください

これを試して。CSSからmin-heightを削除します。

HTMLで、このようにtoggleContainerとして分類されたdivで各仕様を囲みます（私はあなたの一般的なカテゴリを複製し、それぞれにさまざまな仕様を追加しました）。

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
        <li>Released in March 2012</li>
        <li>£429 (GBP); $399 (USD)</li>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
        <li>Released in March 2012</li>
        <li>£429 (GBP); $399 (USD)</li>
    </ul>
</div>
</div>

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>£429 (GBP); $399 (USD)</li>
    </ul>
</div>
</div>

<!-- General -->
<div class="toggleContainer">
<div class="spec-cat">
<div class="spec-cat-content" id="general"><a href="#general">General</a>
<span class="spec-cat-desc"></span></div>
</div>
<div class="specs" id="sec1">
    <ul>
        <li>Manufactured by HTC</li>
        <li>Also known as HTC Ville and HTC Z520e</li>
    </ul>
</div>
</div>

次に、JSファイルでこれを実行します（すべてのonclick ='toggle'呼び出しをこれに結合しました）

$(function() {
    $(".toggleContainer").each(function() {
        //store the .specs height to an unchanging attribute
        $(this).find(".specs").attr("specHeight", $(this).find(".specs").height());

        //when the cat is clicked, expand or collapse the spec
        $(this).find(".spec-cat-content").click(function(e) {
            e.preventDefault();
            //find spec for current toggleContainer that contains this category toggle button
            var spec = $(this).parent().parent().find(".specs");

            //check to see if the spec is displayed.
            if ($(spec).css("display") == "none") {
                //if it isn't then animate to specHeight attr and display block                $(spec).height(0);
                $(spec).css("display","block");
                var newHeight=$(spec).attr("specHeight");
                if(newHeight<100)
                    newHeight=100;
                $(spec).animate({height:newHeight},400);
            }
            else {
                //if it is, then animate to 0 height, and display:none
                $(spec).animate({height:0},400,function(){$(spec).css("display","none");});

            }
        });
    });
});​
于 2012-12-10T15:20:09.593 に答える