Question

我正在使用HTML和Jquery在我的应用程序中实现“ACCORDION”。因为手风琴里面有手风琴。

我的示例代码：

<div class="row-fluid">
    <div id="filtersContainer" class="span12 controlPanel" style="border-radius: 6px;margin-top: 3px;">
        <div class="panel-helpers">
            <ul class="unstyled">
                <li class="helper-collapse"><a data-toggle="collapse" data-target="#form-filters-container" onclick="collapse_fun()" id="idFilters"><i class="icon-minus-sign no-underline" ></i></a></li>
            </ul>
        </div>

        <h4 style="line-height: 40px;">Filters</h4>

        <div id="form-filters-container" class="collapse in">
            <form class="form-horizontal">
                <div class="row-fluid">
                    <div class="well">
                        <div class="panel-helpers">
                            <ul class="unstyled">
                                <li class="helper-collapse"><a data-toggle="collapse" data-target="#demographics" onclick="collapse_demo()" id="idDemographics"><i class="icon-minus-sign no-underline"></i></a></li>
                            </ul>
                        </div>

                        <legend><a>Demographics</a></legend>

                        <div id="demographics" class="queryOptionGroup collapse in">
                            <table id="tableId" style="margin-left:10px;"></table>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>     
</div>

我的onclick方法：

function collapse_fun(){
    console.log("collapse_fun");
    $('.collapse').on('hide', function () {console.log("hide ");
        //$(this).siblings(".panel-helpers").find(".helper-collapse").find("a").html("<i class='icon-plus-sign no-underline'></i>");
       document.getElementById('idFilters').innerHTML = "<i class='icon-plus-sign no-underline'></i>";
    })
    $('.collapse').on('show', function () {console.log("show ");
        //$(this).siblings(".panel-helpers").find(".helper-collapse").find("a").html("<i class='icon-minus-sign no-underline'></i>");
       document.getElementById('idFilters').innerHTML = "<i class='icon-minus-sign no-underline'></i>";
    })
}
// collapse
function collapse_demo(){
    console.log("collapse_demo");
    $('.collapse').on('hide', function () {console.log("hide 1");
        //$(this).siblings(".panel-helpers").find(".helper-collapse").find("a").html("<i class='icon-plus-sign no-underline'></i>");
       document.getElementById('idDemographics').innerHTML = "<i class='icon-plus-sign no-underline'></i>";
    })
    $('.collapse').on('show', function () {console.log("show 1");
    //$(this).siblings(".panel-helpers").find(".helper-collapse").find("a").html("<i class='icon-minus-sign no-underline'></i>");
       document.getElementById('idDemographics').innerHTML = "<i class='icon-minus-sign no-underline'></i>";
    })
}

但每当我点击第一手风琴的图标时，第二个手风琴图标也在变化..我怎么能解决这个问题..提前谢谢..

Answer 1

你已经为内部手风琴赋予了与外部手风琴相同的class名称，并且由于你编写javascript的方式，它将效果应用于该类名的所有元素。

您需要重写您的javascript才能将效果仅应用于点击（this）的当前手风琴，而不是每个具有class名称的元素。 SAM在上面的评论中有一个很好的例子。

手风琴的Html + Jquery +

1 个答案: