0

我已经应用了一个简单的手风琴式列表，这些列表都是在加载时打开的。问题是当我第一次单击选项卡时，图像应该从打开图标变为关闭图标，这很好。但是当我再次单击同一个选项卡时，内容会向下滑动，这很好，但图像不会从 cklose 变为打开。

图像类是：

.close_accordianimage{ background:url(../img/close.png) left 9px no-repeat;}
.open_accordianimage{ background:url(../img/open.png) left 9px no-repeat;}

我使用的脚本是：

//for opening and closing content on click of h3, and also adding of close image on click 
<script>
$(document).ready(function() {
    $("#odd-accordion h3").click(function() {
        $(this).next('div').toggle('300');
        $(this).addClass('close_accordianimage');
    });
});



</script>



<script>
$(document).ready(function(){
    $('#odd-accordion h3').addClass('open_accordianimage');
});

html代码示例是：

<div id="odd-accordion">
    <h3 class="filtertitle">Seater :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />Seater</div>
        <div class="filterfield">
            <input type="checkbox" />Sleeper</div>
    </div>
     <h3 class="filtertitle">A/C :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />A/C</div>
        <div class="filterfield">
            <input type="checkbox" />Non-A/C</div>
    </div>
     <h3 class="filtertitle">Bus Brand :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />Volvo/Mercedes</div>
        <div class="filterfield">
            <input type="checkbox" />Non-Volvo/Mercedes</div>
    </div>
     <h3 class="filtertitle">Timing :</h3>

    <div>
        <div class="filterfield">
            <input type="checkbox" />Early Morning
            <br /> <span class="timing">(5:00 AM - 9:00 AM)</span>

        </div>
        <div class="filterfield">
            <input type="checkbox" />Morning/Afternoon
            <br /> <span class="timing">(9:00 AM - 5:00 PM)</span>

        </div>
        <div class="filterfield">
            <input type="checkbox" />Evening
            <br /> <span class="timing">(5:00 PM - 9:00 PM)</span>

        </div>
        <div class="filterfield">
            <input type="checkbox" />Night
            <br /> <span class="timing">(9:00 PM - 5:00 AM) </span>

        </div>
    </div>
     <h3 class="filtertitle">Fare :</h3>

    <div>Jquery filer</div>
</div>

我只希望 open 和 cose 类（具有各自的图像）也可以使用 content.please 进行切换

4

2 回答 2

1

你需要这样的东西：

$("#odd-accordion h3").click(function () {
    $(this).next('div').toggle('300');
    if ($(this).hasClass('close_accordianimage')) {
        $(this).addClass('open_accordianimage');
        $(this).removeClass('close_accordianimage');
    } else {
        $(this).removeClass('open_accordianimage');
        $(this).addClass('close_accordianimage');
    }
});

试试这个小提琴并为图像添加正确的 url。

于 2013-08-08T10:33:07.800 回答
0

我想你也忘了添加removeClass()。现在你只需继续堆叠类。在单击几次后，您是否使用 Firebug 或类似的工具来检查元素，我敢打赌它上面有一个close_accordianimage重复项列表。

为了解释发生了什么，你从 开始open_accordianimage，然后 close_accordianimageduplicates添加，它永远不会被删除。为了正确地做到这一点，我会删除open_accordianimage，并添加 close_accordianimageduplicates，反之亦然。

于 2013-08-08T10:28:06.660 回答