Question

菜单有效，但子菜单没有。当你点击子菜单时，它表现得很有趣并且没有显示信息加上它只是关闭了父div。任何帮助都会很棒。

$(function() {
  // when a tab is clicked
  $(".hideSeekTab").on("click", function() {
    // if the one you clicked is open,
  if (
      $(this)
       .find("#hiddenDivs")
        .hasClass("open")
    ) {
      // then close it.
      $(".hideSeekTab .open")
        .slideToggle()
        .removeClass("open");
      $(".iconBox").removeClass("closed");
      // otherwise,
    } else {
      // close all tabs, 
      $(".hideSeekTab .open")
        .slideToggle()
        .removeClass("open");
      // and open the one you clicked
      $(this)
      .find("#hiddenDivs")
       .slideToggle()
     .addClass("open");
      $(".iconBox").removeClass("closed");
      $(this)
        .find(".iconBox")
        .addClass("closed");
    }
  });
});

https://codepen.io/blaveder1/pen/paQmyq

Answer 1

如果不对您的示例进行重新编码（实际上并没有真正帮助），我建议您查看此页面，其中列出了使用jQuery最简单的手风琴，并从那里构建。专注于首先使结构正确，然后去造型。

Ridiculously simple accordion without the jQuery UI library

您在代码中遗漏的一个重点是“id”每页应该是唯一的 - 每页只有一个元素应该具有该ID。如果你想用jQuery找到多个元素，你应该使用css类。

此外，当您的宝宝看起来很好时，请尝试在您的浏览器中禁用javascript，然后查看其外观（...实际上，您应首先执行此操作，以便在用户出于某种原因，“优雅地”降级时切换javascript off。。

手风琴是了解jQuery的好方法，我希望这会有所帮助。

带有子菜单的手风琴式菜单

1 个答案: