Question

我对html / js / css的所有内容都很陌生。现在我需要一个列表，所以我决定使用一个你可以slidetoggle的列表。我查了一下，发现了如何重现这种效果（下面的代码）：

        var subMenu = jQuery(".tableContainer ul li ul li");
        var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");

        linkClick.click(function () {
            $(this).find('ul li').slideToggle(200);
        });

（如果你想知道2 ul和li，那是因为我想在另一个列表中列出该列表，但这并没有改变问题所以我没有在我的解释中包含它）由于我对这个话题很新，我只能理解70％的情况。但对于我的项目，我需要使用列表中的元素（隐藏的和滑动后可见的元素）。我想做的事情需要点击它们，如点击突出显示，但现在我遇到问题，我发布的代码使得幻灯片效果不仅由标题触发，而且由元素触发。所以我不能点击元素而不用相同的点击最小化列表（显然，元素再次被隐藏）。我希望你们能解释一下如何使函数只由头对象触发，而不是由整个列表元素（头部和扩展列表）触发。

Answer 1

看看幻灯片效果不仅由标题触发，而且还由因为事件冒泡概念而触发的元素触发，这基本上意味着在点击事件的情况下，如果您点击子元素，则事件默认冒泡到父元素树直到文档级别触发任何已注册的事件处理程序。因此，当您单击该元素时，您也会单击标题，因此您需要添加另一个子元素并处理其中的单击，如下所示： -

 <div class="tableContainer">
    <ul>
     <li> <span>menu 1</span>
    <ul>
      <li>link 1</li>
    </ul>
  </li>
  <li><span> menu 2</span>
    <ul>
      <li>link 2</li>
    </ul>
  </li>
  <li><span> menu 3</span>
    <ul>
      <li>link 3</li>
    </ul>
  </li>
  <li> <span>menu 4</span>
    <ul>
      <li>link 4</li>
    </ul>
  </li>
    </ul>
  </div>


$(function() {
  var subMenu = jQuery(".tableContainer ul li ul li");
  var linkClick = jQuery(".tableContainer span");
  console.log(linkClick.length);

  linkClick.click(function() {
    console.log('clicked');
    $(this).siblings('ul').slideToggle(200);
  });
});

完整工作示例Here

希望这能回答你的问题。

没有列表元素的jquery slidetoggle列表会触发效果

1 个答案: