Это мой второй вопрос по этой теме, оригинальный вопрос можно найти здесь:
JQuery, если в таком случае используется плагин парсера URL, должно быть более элегантное решение!
Если вы сидите с комфортом, я начну!
Я создал веб-страницу, которая содержит список вопросов. Каждый вопрос имеет ответ, содержащийся в Div после него. HTML выглядит так:
<div class="questions_main_box">
<h2>common questions:</h2>
<ul>
<li>
<h3 id="question1">question number 1</h3>
<div id="answer1"> answer number 1</div>
</li>
<li>
<h3 id="question2">question number 2</h3>
<div id="answer2"> answer number 2</div>
</li>
etc etc...
</ul>
</div>
Я написал некоторый код, используя jQuery для настройки поведения этого списка. Идея состоит в том, что все ответы Div скрыты с помощью jQuery, а затем раскрываются одним из двух способов:
Либо пользователь щелкает соответствующий заголовок h3
или
Пользователь нажимает на ссылку на один из вопросов с другой страницы.
Если пользователь переходит с другой страницы, должен отображаться вопрос, по которому он щелкнул, а все остальные скрыты.
Я сделал эту работу, но мой код довольно неэффективен. В моем предыдущем объяснении этой проблемы мне был предоставлен ответ, но полученные ответы имели нежелательный побочный эффект: они не позволяли меню отображать ответы, если в URL-адресе не была якорная ссылка. Так, например:
http://mydomain.com/questions.html не будет работать
но
http://mydomain.com/questions.html#question1 будет работать!
Мне нужно, чтобы оба работали! Как я уже сказал, моя версия работает в обоих направлениях, но довольно неуклюжа, и я уверен, что должен быть лучший способ выразить ее. Вот код, который может быть более эффективным:
if
($.url.attr('anchor') == 'question1'){
$('#answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8').hide();
$.scrollTo('#question1');
}
else if
($.url.attr('anchor') == 'question2'){
$('#answer1, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8').hide();
$.scrollTo('#question2');
}
else if
($.url.attr('anchor') == 'question3'){
$('#answer1, #answer2, #answer4, #answer5, #answer6, #answer7, #answer8').hide();
$.scrollTo('#question3');
}
else if
($.url.attr('anchor') == 'question4'){
$('#answer1, #answer2, #answer3, #answer5, #answer6, #answer7, #answer8').hide();
$.scrollTo('#question4');
}
else if
($.url.attr('anchor') == 'question5'){
$('#answer1, #answer2, #answer3, #answer4, #answer6, #answer7, #answer8').hide();
$.scrollTo('#question5');
}
else if
($.url.attr('anchor') == 'question6'){
$('#answer1, #answer2, #answer3, #answer4, #answer5, #answer7, #answer8').hide();
$.scrollTo('#question6');
}
else if
($.url.attr('anchor') == 'question7'){
$('#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer8').hide();
$.scrollTo('#question7');
}
else if
($.url.attr('anchor') == 'question8'){
$('#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7').hide();
$.scrollTo('#question8');
}
else if
($.url.attr('anchor') != 'question1, question2, question3, question4, question5, question6, question7, question8'){
$('.questions_main_box ul li div').hide();
};
Работает нормально, но довольно неуклюже, в текущем воплощении это также означает, что если я хочу добавить больше вопросов и ответов, я должен добавить их явно в список (ы) идентификаторов. Было бы гораздо лучше не делать этого!
Просто чтобы у вас была вся картинка, вот остаток кода:
$('.questions_main_box h3').addClass('js_main_box');
$('.questions_main_box h3').hover(
function(){
$(this).addClass('js_main_box_highlight');
},
function(){
$(this).removeClass('js_main_box_highlight');
}
);
$('.questions_main_box h3').click(
function(){
if ($(this).next().is(':visible')){
$(this).next().hide('fast');
}
else if ($(this).next().is(':hidden')){
$(this).next().show('fast');
}
}
);
Так что все это работает как есть, и я на самом деле просто ищу способы сделать его более эффективным.
Я обнаружил одну проблему с тем, что я делаю, хотя, и я не могу понять, почему это происходит, и как бы я решил это исправить:
Проблема только в Firefox (я тестировал 3.0.9 и 3.1b3)
Когда я нажимаю на одну из якорных ссылок для перехода к соответствующему вопросу и ответу, Firefox переходит на нужную страницу, и правильный ответ будет виден, но страница не будет вертикально прокручиваться до нужного места, где тег привязки начинается. Это означает, что довольно часто вопрос, на который щелкнул пользователь, не отображается на экране, когда он впервые попадает на страницу вопросов и ответов! Это происходит только в Firefox. Сафари и Опера идут в нужное место. Я уверен, что это должно быть как-то связано со скрытыми элементами Div, например, когда JavaScript отключен и список отображается нормально, теги привязки работают нормально в Firefox. Я нахожу это действительно странным, и я понятия не имею, как это можно исправить или это просто ошибка без обходного пути. Любая информация по любому из моих вопросов будет с благодарностью получена.
Спасибо, что нашли время взглянуть на это!
Ян.
PS
Я использую плагин JQuery URL Parser, найденный здесь: http://projects.allmarkedup.com/jquery_url_parser/