两个不同的锚 expand/collapse 相同 div

Question

我编写了一段代码，当单击锚点时会展开 div。我想添加另一个在单击时展开相同 div 的锚点，但是当我添加第二个锚点时，第一个锚点不起作用。难不成可以用两个不同的anchor来展开同一个div？如果是这样，我该怎么做？这是我到目前为止编写的代码：

<div class="Style10" id="ED">

      <h5><a href="#" id="EDA" onclick="Anchor(id)">Education</a><img id="EDI" class="Triangle" src="TriangleDown.png"></h5>

      <div>

           <h6><a href="#" id="EDAA" onclick="Anchor(id)">Add</a></h6>
           //Here I want to add the second anchor that also expands div class="Style11"
           <div class="Style11">
              ....
              some code here
              ....
           <div>

      <div>
<div>

JQuery代码是：

$(document).ready(function(){

   $('#ED div').hide();

   $('#ED a').click(function(e){
        $(this).parent().next('#ED div').slideToggle('normal');
        $(this).parent().toggleClass('active');
        e.preventDefault();
   });

});

锚函数：

 function Anchor(id) {
    if (id == "EDA") {
        if (document.getElementById("EDI").getAttribute("src") ==    "TriangleDown.png") {
            document.getElementById("EDI").src = "TriangleUp.png";
        }
        else {
           document.getElementById("EDI").src = "TriangleDown.png";
        }
    }
}

Answer 1

next() 指的是 closest next 元素。在你的情况下（当你添加另一个 link 时），第一个 link next 将是第二个 link.

您可以使用 nextAll() instead of next()

简单地解决这个问题

// instead of:
// $(this).parent().next('#ED div').slideToggle('normal');
// this:
$(this).parent().nextAll('div').first().slideToggle('normal');

此外，不需要使用 onclick 属性，因为您已经为具有 jQuery $('#ED a').click(...)

的元素注册了点击事件处理程序

JSFiddle

编辑

如果您在单击上有更多内容需要处理，请将其添加到 click() 或 onclick 方法中。在这种情况下，无需同时使用两者。

JSFiddle 2

两个不同的锚 expand/collapse 相同 div

Two different anchors to expand/collapse the same div

html

anchor

jquery

expand