Question

我编写了一个代码，用于在单击锚点时扩展div。我想添加另一个锚点，在单击时扩展相同的div但是当我添加第二个锚点时，第一个锚点不起作用。是否有可能使用两个不同的锚来扩展相同的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()参考最近的 next 元素。在您的情况下（当您添加其他链接时），第一个链接next将是第二个链接。

您只需使用nextAll()代替next()

即可解决此问题

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

此外，由于您已使用jQuery onclick

为元素注册了click事件处理程序，因此无需使用$('#ED a').click(...)属性

JSFiddle

修改

如果您有更多要处理点击的内容，请使用click()或onclick方法添加。在这种情况下，不需要同时使用它们。

JSFiddle 2

两个不同的锚来扩展/折叠相同的div

1 个答案: