Question

我在表格中有一些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>
...

Answer 1

您可以使用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');
}

Demo

动态JQuery切换下拉列表

1 个答案: