Question

 var header = $("#accordion");

            $.each(data, function () {
                header.append("<a id='Headanchor' href='javascript:toggleDiv($(this));'>" +   this.LongName + "</a>" + "<br />",
                "<div id='myContent' style='display:none'>" +
                "<ul>" +
                "<li>" + "ID: " + this.Id + "</li>" +
                "<li>" + "Short Name: " + this.ShortName + "</li>" +  "</ul>" + "</div>"
                );


                function toggleDiv(element) {
       var x = element.next();
       x.toggle();

       <div id="accordion">

</div>

只有一个div的工作脚本，即第一个

function toggleDiv() {

              $("#myContent").toggle();

}

我想切换div，具体取决于单击哪个锚标记但无法执行此操作。如果我使用id选择器然后第一个div被切换但不是其余的，因为他们得到相同的id，这是erong..can somone请帮助我这个....

Answer 1

在javascript:toggleDiv($(this)) this中指向窗口，而不是指向对象。见JS fiddle。所以改变下面的代码：

"<a id='Headanchor' href='javascript:toggleDiv($(this));'>"

为：

"<a id='Headanchor' href='#' onclick='return toggleDiv($(this));'>"

和JS代码：

function toggleDiv(element) {
       var x = element.next();
       x.toggle();
       return false;
}

此外，ID应该是唯一的，在您的代码中，您将拥有多个Headanchor元素。

Answer 2

全部隐藏，只显示您想要的方法：

$('#accordian>div').hide()      // hide all divs within the accordian
  .find('#selectedId').show();  // then show the one that matches the ID you want

但是要省去重新发明轮子的麻烦并使用jQueryUI。

切换div取决于选择哪一个

2 个答案: