Question

有很多类似的问题，我已经看了很多，但无法找出或找到解决这个问题的问题。

问题是我试图将事件监听器应用于特定的类（大部分是成功的），并且每个类都有自己的元素和一个单独的类。

group.addEventListener("click", toggle, false);

group是一个将有点击事件的类。

    function toggle() {
        var contents = this.getElementsByClassName('content');     

        for (i = 0; i < contents.length; i++) {

            if (contents[i].style.display == "block") {
                contents[i].style.display = "none";
            }
            else {
                contents[i].style.display = "block";
            }
        }      
    }

contents是另一个嵌套在group中的类。会有很多contents，但只有少数group。

使用.addEventListener有效，但click事件会扩展/折叠每个contents，而不仅仅是那个特定group下的group。我点击contents中的任何一个，页面上的所有this都会展开/折叠。我怎样才能解决这个问题？顺便说一句，这些只是代码的片段（发布的内容很多）。我尝试使用group.innerHTML += String.format("<div class='group' style='display: block;'>" + "<h3 style='display: inline-block; color: #000; margin: 0px; padding: 0px;'>{0}</h3>" + "<img src='https:\/\/my.blah.com\/_layouts\/15\/images\/ecbarw.png' style='margin: 5px;' alt='Click to expand-collapse.' />" + "{1}</div>", trimmedKey, groups[key]); group.addEventListener("click", toggle, false);来提供范围，但我只是做错了，因为它无论如何都会产生相同的结果。提前谢谢。

修改

有关HTML的更多信息

group

我将其用于SharePoint Web部件。它位于显示模板中，因此需要发布大量不相关的代码，但我会为contents和var content = String.format('<div class="content" style="display: none; margin: 30px 0px;"><span id="{0}" class="ms-srch-item-title">' + '<h3 class="ms-srch-ellipsis">{1}</h3>' + '</span>' + '<span style="margin-right: 10px;"><span style="font-weight:bold;">Assigned To: </span>{2}</span>' + '<span style="margin-right: 10px;"><span style="font-weight:bold;">Due Date: </span>{3}</span>' + '<span style="margin-right: 10px;"><span style="font-weight:bold;">Task Status: </span>{4}</span></div>', $htmlEncode(id + Srch.U.Ids.title), titleHtml, assignedTo, dueDate, status); search.Grouping.push(grouping, content);添加相关的HTML。

content

groups[key]被推送到一个函数（此处未显示），将它们分组。 content与def decode(cfile): with open(cfile,"rb") as f: enc = f.read() len_dkey = int(bin(ord(enc[0]))[2:].zfill(8) + bin(ord(enc[1]))[2:].zfill(8),2) # length of dictionary pad = ord(enc[2]) # number of padding zeros at end of message dkey = { int(k): v for k,v in json.loads(enc[3:len_dkey+3]).items() } # dictionary enc = enc[len_dkey+3:] # actual message in bytes com = [] for b in enc: com.extend([ bit=="1" for bit in bin(ord(b))[2:].zfill(8)]) # actual encoded message in bits (True/False) cnode = 0 # current node for tree traversal dec = "" # decoded message for b in com: cnode = 2 * cnode + b + 1 # array implementation of tree if cnode in dkey: dec += dkey[cnode] cnode = 0 with codecs.open("uncompressed_"+cfile,"w","ISO-8859-1") as f: f.write(dec)基本相同。

Answer 1

我不确定为什么它不能用于您的情况，但我已经为您准备了一个简单的演示：

＆＃13;

// get all the elements with class 'group'
var groups = document.getElementsByClassName('group');

// add click event listener to each group
for (var i = 0; i < groups.length; i ++)
  groups[i].addEventListener("click", toggle, false);

// function to toggle group contents
function toggle() {
  // get all the elements within this group with class 'content'
  var contents = this.getElementsByClassName('content');     

  // if the content is visible then hide it and vice-versa 
  for (i = 0; i < contents.length; i++) {
    if (contents[i].style.display == "block") {
      contents[i].style.display = "none";
    }
    else {
      contents[i].style.display = "block";
    }
  }      
}

＆＃13;

.content {
  display: None;
  padding-left: 10px;
}

.group {
  margin-top: 10px;
}

＆＃13;

<div class="group">
Group1
  <div class="content another">
  Group 1 Content 1
  </div>
  <div class="content another">
  Group 1 Content 2
  </div>
</div>
<div class="group">
Group2
  <div class="content another">
  Group 2 Content 1
  </div>
  <div class="content another">
  Group 2 Content 2
  </div>
</div>

＆＃13;

JavaScript - 使用多个类时展开/折叠问题

1 个答案: