Question

这是我的程序，显示了一个手风琴。

我正在创建一个包含一些样本数据的Accordian。点击那个Accordian元素，我捕获了click事件，一旦选中，我正在加载xml文件，并将数据附加到div。

但问题是，所有其他Accoridain元素都会显示附加数据。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1" import="java.util.*, com.as400samplecode.util.*"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Basic jQuery Accordion</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />

   <script type="text/javascript">
var xmldocu = '<categories><category id="2" name="Pepsi" ><products><product id="858" name="7UP" price="24.4900" /><product id="860" name="Aquafina" price="24.4900" /></products></category><category id="4" name="Coke" ><products><product id="811" name="ThumpsUp" price="24.4900" /><product id="813" name="Maaza" price="24.4900" /></products></category></categories>' ;

          $(document).ready(
            function () {
                $("#accordion").accordion({ header: "h3",          
                    autoheight: false,
                    active: false,
                    alwaysOpen: false,
                    fillspace: false,
                    collapsible: true,

                    //heightStyle: content   //auto, fill, content
                });

$("#accordion").accordion({
 activate: function(event, ui) {
var selectedeleemnt = ui.newHeader.text();
if(selectedeleemnt=="CoolDrinks")
{
$(xmldocu).find("category").each(function () {
 var categories  = $(this).attr('name');
  var str= '';
 var UL = $("<ul></ul>");
 str += '<li>' + categories + '</li>'; 
 UL.append(str);
 $("h4").append(UL);

});
}
}
});
});
    </script>

</head>
<body>

    <div style="width: 468px;">
        <div id="accordion">


 <%
        ArrayList<String> list = new ArrayList<String>();
        list.add("CoolDrinks");
        list.add("Snacks");
        list.add("Other");
        %>

<%
      for(String item : list)
      {
          %>
          <h3><a href="#"><%=item%></a></h3>
          <div>
              <h4></h4>
           </div>
      <%
      }
      %>
      <%
      %>

    </div>
    </div>

</body>
</html>

Answer 1

我认为问题在于这一行：

$("h4").append(UL);

应该是这样的：

$(".your-accordion-element h4").append(UL);

其中.your-accordion-element是您希望附加数据的accordion元素的唯一选择器。

相同的数据被附加到Jquery手风琴的所有元素

1 个答案: