jsp頁面展示更加商品的分類，控制商品的顯示

我的大概思路是這樣的，第一后果獲取所有的商品分類 保存在list集合里面，第二從后台獲取所有的商品 第三在JSP頁面遍歷商品分類集合放在頁面的左邊，然后jsp頁面商品詳細信息這塊，也得先遍歷商品分類，然后里面嵌套遍歷商品詳細信集合

並且帶條件<c:if> 判斷語句 條件為，分類對象的ID 要等於商品對象里面的分類ID 大概是這樣，看下面JSP代碼明白了

1：jsp 頁面如下圖

 <div class="secti-con">
            <!-- 菜品分類 -->
               <div class="secti-conl" >
                  <ul class="secti-conla">
                     <c:forEach items="${classificationList }" var="classification">
                      <li style="border-top:0;" data-id="${classification.id }">${classification.className }</li>
                      </c:forEach>
                  </ul>
              </div>
              <!-- 菜品詳細 -->
              <div class="secti-conr" >
              <c:forEach items="${classificationList }" var="classification">
                  <ul id="${classification.id }" style="display: none;">
                    <s:iterator value="list" var="dishes" status="st">
                    <c:if test="${classification.id eq dishes.classification.id }">
                       <li>
                          <div class="sect-box">
                              <div class="sect-img">
                            <%-- <a href="javascript:goToDetail(${dishes.id})"><img src="<%=basePath %>${dishes.imageUrl}"></a> --%>
                            <img src="<%=basePath %>${dishes.imageUrl}" onerror="javascript:this.src='<%=basePath %>res/funcanteen/images/Place-order-3.0/noimg.png';"/>
                              </div>
                              <div class="sect-name">
                                  <div class="sect-name1">
                                     <%--  <a href="javascript:goToDetail(${dishes.id})">
                                         <span >${dishes.name }</span>
                                     </a> --%>
                                     <span >${dishes.name }</span>
                                   </div>
                                  <div class="sect-name2">已售出 <span id="dishes_${dishes.id }" class="salesShow">加載中</span></div>
                                  <div class="sect-name3">￥<span class="priceded">${dishes.price }</span></div>
                                  <div class="caidan_jg_y">${p.oldPrice != null ? '￥' : ''}${p.oldPrice }</div>
                              </div>
                              <div class="sect-add">
                                  <div class="sect-adda">
                                      <div class="sect-added">
                                          <button type="button" class="dellNum delled" id="dellNum_${dishes.id }">-</button>
                                          <input name="dell_dishesId" type="hidden" value="${dishes.id}" id="dell_dishesId"/>
                                          <input id="numberinst_${dishes.id }" class="numberinst" readonly="" value="0" type="text" name="number" maxlength="2">
                                          <button type="button" class="addedNum addedl">+</button>
                                          <input name="dishesId" class="dishesIdInput" type="hidden" value="${dishes.id }"/>
                                      </div>
                                   </div>
                              </div>
                          </div>
                      </li>
                      </c:if>
                    </s:iterator>
                  </ul>
                   </c:forEach>
              </div>
          </div>

2：頁面加載時候默認給選中第一個分類

js代碼如下頁面第一次加載時候js控制選中一個商品分類

$(document).ready(function(){
    var conla =  $(".secti-conla li:first-child");
    conla.addClass("sectidea");
    var conlaId = conla.data("id");
    $("#"+conlaId).show();
});

3:js控制點擊商品分類時候顯示商品詳細信息

//點擊菜品分類名稱
      $(".secti-conla li").click(function(e) {
	     $(this).addClass("sectidea").siblings().removeClass("sectidea");
	     var conlaId = $(this).data("id");
    	     $("#"+conlaId).show().siblings().hide();
	}); 

具體后台數據怎么封裝的，這個根據個人需求決定了，這里就不說了。