0

細かい設定を行うためだけに、テーブル内にいくつかの div があります。div を押すと、その下にテキストがドロップダウンし、div をもう一度押すと、テキストが再び消えます。

また、divの1つを押すと、左のimgが下向きの矢印を表示し、通常の場合は右向きの矢印を表示します。

私は10 divでこの機能を持っています。

私の問題は、div 1を押すと正常に動作し、矢印が下に表示され、テキストがドロップダウンすることです..

ここに動的にする方法はありますか??

ここに私のJQがあります：

<script type="text/javascript">

$(document).ready(function(){
    var tjek = "TRUE";
    $(".title").click(function()
    {                                                                                      
        $(this).children('.subtitle').toggle(500);
        if(tjek == "TRUE")
        {
            $(this).css({"background-image" : "url('/images/images/Pil_open.png')"});
            tjek = "FALSE";
        }else{
            $(this).css({"background-image" : "url('/images/images/Pil_normal.png')"});
            tjek = "TRUE";
        }
    });
});

HTMLは次のとおりです。

<table border="0" cellpadding="0" cellspacing="5" style="min-height: 100px; width: 698px;">
<tbody>
<tr>
<td valign="top">                                                                                                                                    
<div class="title">
    <p id="tekst">
        <b>BLA BLA BLA</b>
    </p>
    <div class="subtitle">
        TEXT TEXT TEXT TEXT
    <div>
</div>
</td>
...
4

1 に答える 1

4

を使用して実行できますtoggleClass。

$(".title").click(function() {

    var $element = $(this);

    $element.toggleClass('open');
    $element.children('.subtitle').toggle(500);
});

CSS

.title {
    background-image: url('/images/images/Pil_normal.png');
}

.title.open {
    background-image: url('/images/images/Pil_open.png');
}

デモ

于 2013-03-06T12:06:31.107 に答える