Question

我已经应用了一个简单的手风琴类型列表，列表都在加载时打开。问题是当我第一次点击标签时，图像应该从打开变为关闭图标，这很好。但当我再次点击同一个标签时，内容向下滑动，这很好，但图像不会从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 help进行切换

Answer 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');
    }
});

尝试 fiddle 并为图片添加正确的网址。

Answer 2

我认为您忘了添加removeClass()。现在你只是继续堆叠课程。你点击它后几次使用Firebug或类似的东西检查元素，我敢打赌它有一个close_accordianimage重复的列表。

要解释会发生什么，请从open_accordianimage开始，然后添加close_accordianimageduplicates，并且永远不会删除它。要正确执行此操作，我会删除open_accordianimage，然后添加close_accordianimageduplicates，反之亦然。

我第二次点击时图像不会出现

2 个答案: