0

我在表格中有一些 div，只是为了进行良好的设置。当我按下一个 div 时，它下面会出现一个文本，如果你再次按下 div，文本就会再次消失。

另外，当我按下其中一个 div 时，左侧的 img 将显示一个向下箭头，当它正常时，它将显示一个指向右侧的箭头。

我在 10 个 div 上有这个功能。

我的问题是，当我按下 div 1 时，它工作正常，箭头向下显示，文本下降.. 但是当我按下另一个 div 时，当第一个打开时，箭头开始混乱..

有没有办法让它变得动态？

这是我的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 回答