Jquery Accordion Menu не прокручивается до тегов привязки

У меня есть меню аккордеона jquery в нижнем колонтитуле, которое отлично работает, за исключением того факта, что когда открывается подменю... страница не переходит к якорной ссылке. Поскольку это находится в моем нижнем колонтитуле, я вынужден прокрутить вниз, чтобы увидеть открытое подменю. Я хочу, чтобы страница автоматически прокручивалась вниз.

Любые идеи, почему это не работает? Я также пытался поместить идентификатор в , но это не сработало.

Мой 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);
}       
}); });

jquery tags anchor jquery-ui-accordion
person Beth    schedule 24.09.2013    source источник
comment
Это слишком много кода для SO-вопроса. Я предлагаю вам сократить это до 10 строк или меньше наиболее подходящего кода.   -  person Justin Morgan    schedule 25.09.2013
comment
Я удалил CSS... не уверен, что нужно было устранять неполадки... я не уверен, что я могу что-то вырезать из jquery.   -  person Beth    schedule 25.09.2013

Ответы (2)


arrow_upward
0
arrow_downward

Это эта часть:

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

Этот идентификатор должен просто говорить sanfran без #. # в <a href="#sanfran" указывает, что далее следует идентификатор, поэтому #sanfran является избыточным.

Просто должно быть так:

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

Все остальное выглядит нормально.

person Justin Morgan    schedule 24.09.2013

arrow_upward
0
arrow_downward

Это казалось бы правильным:

<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>

У вас был тег # в вашем удостоверении личности, которого не должно быть?

У вас есть это:

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

А должно быть так:

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

ОБНОВИТЬ:

Предотвращает ли preventDefault в вашем javascript прыжок?

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

Что произойдет, если вы удалите этот фрагмент кода?

person Robert F.    schedule 24.09.2013
comment
ой, извините... Я исправил это, но страница по-прежнему не прыгает вниз. - person Beth; 25.09.2013
comment
Страница живая? Так мы можем это увидеть? - person Robert F.; 25.09.2013
comment
Является ли часть preventDefault вашего javascript причиной того, что он не прыгает? См. выше. - person Robert F.; 25.09.2013
comment
О, подождите... Я нашел что-то в CSS, что на это повлияло. Спасибо за ваше время, Роберт! - person Beth; 25.09.2013
comment
Абсолютно! Спасибо еще раз! - person Beth; 25.09.2013