Question

我的页脚中有一个jquery手风琴菜单效果很好，除了子菜单打开时...页面没有导航到锚链接。由于这是在我的页脚，我被迫向下滚动以查看打开的子菜单。我希望页面自动向下滚动。

为什么这不起作用的任何想法？我也尝试将id放入其中，但这不起作用。

我的HTML：

<ul class="footer-offices">
<li id="#sanfran" class="one"><a href="#sanfran">text</a>
  <ul class="submenu"><li>office info here</li></ul>
</li>
</ul>

Jquery是：

$(document).ready(function(){
$("ul.footer-offices li > a").on("click", function(e){
if($(this).parent().has("ul")) {
  e.preventDefault();  
}
if(!$(this).hasClass("open")) {
  // hide any open menus and remove all other classes
  $("ul.footer-offices li ul").slideUp(350);
  $("ul.footer-offices li a").removeClass("open");

  // open our new menu and add the open class
  $(this).next("ul").slideDown(350);
  $(this).addClass("open");   
}
else if($(this).hasClass("open")) {
  $(this).removeClass("open");
  $(this).next("ul").slideUp(350);
}       
}); });

Answer 1

这似乎是正确的：

<ul class="footer-offices">
  <li id="sanfran" class="one"><a href="#sanfran">San Francisco Headquarters</a>
    <ul class="submenu"><li>office info here</li></ul>
  </li>

  <li id="boston"><a href="#boston">Boston Headquarters</a>
    <ul class="submenu"><li>office info here</li></ul>
  </li>
</ul>

您的ID中是否有＃不应该存在的标记？

你有这个：

<li id="#sanfran" class="one">

它应该是这样的：

<li id="sanfran" class="one">

更新：

你的javascript中的preventDefault会阻止跳转吗？

if($(this).parent().has("ul")) {
  e.preventDefault();  
}

如果删除那段代码会怎样？

Answer 2

这是这一部分：

<li id="#sanfran" class="one">

该ID应该只说sanfran，而不是#。 #中的<a href="#sanfran"表示后面的内容是ID，因此#sanfran是多余的。

应该是这样的：

<li id="sanfran" class="one">

其他一切看起来都不错。

Jquery Accordion菜单不滚动到锚标签

2 个答案: