0

私はjQueryで立ち往生しています。jQuery を使用してリスト要素を切り替えています。リスト要素を開くと、そのすべての子が閉じます。

HTML

<div id="listContainer">
    <ul id="expList">
        <li>Sessions
            <ul>
                <c:forEach var="item" items="${sessionFormData.classSessionList}" varStatus="sessionstatus">
                    <li>${item.sessionName}
                        <ul>
                            <c:forEach items="${item.courseList}" var="course" varStatus="classstatus">
                                <c:if test="${item.sessionId==course.sessionId}">
                                    <li>${course.courseName}
                                        <ul>
                                            <c:forEach items="${studentSectionList}" var="section" varStatus="sectionstatus">
                                                <c:if test="${course.courseId==section.courseId}">
                                                    <li>${section.sectionName}</li>
                                                </c:if>
                                            </c:forEach>
                                        </ul>
                                    </li>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </li>
                </c:forEach>
            </ul>
        </li>
    </ul>
</div>

jQuery

ここで、この jQuery を使用してアイテムをリストし、その兄弟を折りたたむ方法を示します。機能を試してみました.sibling()。このような方法はありますか？

function prepareList() {
    $('#expList').find('li:has(ul)')
        .click(function (event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
        .addClass('collapsed')
        .children('ul').hide();
};

$(document).ready(function () {
    prepareList();
});

CSS

#listContainer {
    margin-top:15px;
}
#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 1px;
    padding-left: 20px;
    background-repeat: no-repeat;
}
/* Collapsed state for list element */
 #expList .collapsed {
    background-image: url(/oltapp/Images/plus-icon.png);
}
/* Expanded state for list element
    /* NOTE: This class must be located UNDER the collapsed one */
 #expList .expanded {
    background-image: url(/oltapp/Images/minus-icon.png);
}
4

1 に答える 1

0

あなたが意図したようにコードを修正しました

JS コード:

function prepareList() {
$('#expList').find('li:has(ul)')
    .click(function (event) {

    //Newly added code block Begin 
    //Extract  each sibling and collapse them if expanded
    $(this).siblings().each(function () {
        //alert($(this));
        var $this = $(this);
        if ($this.hasClass('expanded')) {
            $this.removeClass('expanded').addClass('collapsed');
            //$this.children('ul').toggle('medium');
            $this.find('ul').css('display', 'none');
        }
    });
    //Newly added code block End

    if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
    }
    return false;
})
.....

新しく追加された js コードは、 「//新しく追加されたコード ブロック Begin/End」というコメントでタグ付け されます。

これはライブデモ用のJSFIDDLEです

生きて、夢を、大切に :)

ハッピーコーディング:)

于 2013-07-18T06:06:21.660 に答える