我被困在jQuery中。我使用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); 
}

來源

2013-07-17 kushal jain

ü可以創建一個小提琴這，http://jsfiddle.net。這將很容易修復它這種方式 – dreamweiver

這不是HTML，所以它不可能在它上面工作 – iConnor

給HTML代碼.. – Anujith

我有固定的代碼，你打算

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代碼標記有如下評論， 「// Ne WLY添加的代碼塊開始/結束「

下面是現場演示

現場，夢想JSFIDDLE，珍惜:)

編碼快樂:)

來源

2013-07-18 06:06:21 dreamweiver

如何摺疊jQuery中的兄弟？

HTML

jQuery的

CSS

回答

相關問題