使列表项内的 div 可点击

Question

我正在做一个显示书签页面的项目，我想做的一部分是隐藏每个书签的描述和切换功能，直到单击书签。 我想通过 add/removeClass() 来决定是否显示书签信息的 rest 以保持简单。 我还想一次只允许打开一个，但在我这样做之前，我需要先点击我的书签。

我已经开始将书签标题设置为按钮，但出于样式目的，我想将其更改为按钮。

我没有正确调用书签，因为它不会在书签按钮单击时 console.log 任何内容。 请记住，我只包括我的代码的 2 个功能。 我声明稍后要添加的内容，并在我的 js 底部调用函数：

 const generateItemElement = function (item) { //item is the definition of the current object and all let itemTitle = `<span class="bookmark bookmark_filtered">${item.title}${item.rating}</span>`; //affects filtered items //REMEMBER TO ADD DELETE FUNCTION AND ICON return ` <li class="js-bookmark" data-item-id="${item.id}"> <button type='button' class="js-bookmarkHead"> ${itemTitle} </button> <div id="js-bookmarkInfo" class='hidden'> <button class="js-item-delete">Delete</button> <button class="visit"> <a href="${item.url}"target=blank>Visit</a> </button> <div class="description"> ${item.desc} </div> </div> </li>`; }; const handleToggleExpandClick = function () { $('#bookmarkHead').click(() => { $('#js-bookmarkInfo').removeClass('hidden'); render(); }); };

Answer 1

这一行：

$('#bookmarkHead').click(() => {

设置在将书签元素添加到 DOM 后需要完成的点击处理程序，因此您的代码现在的结构方式，您必须在generateItemElement之后调用handleToggleExpandClick 。 查看委托的事件处理程序以解决此问题。

但是，您指定的选择器$('#bookmarkHead')不正确，它应该是$('.js-bookmarkHead')因为您使用的是 class 属性。 此外， id 属性必须是唯一的，我猜你有多个书签，所以我不会将该属性用于js-bookmarkInfo 。

您还可以将点击处理程序更改为：

$('.js-bookmarkHead').click(function() { // <- not using arrow style signature
  // $(this) will refer to the clicked .js-bookmarkHead element
  $(this).next().toggleClass('hidden');
  render();
});