jQuery: как не скрыть раздел с якорем в URL - PullRequest
Новая
       0

jQuery: как не скрыть раздел с якорем в URL

3 голосов
/ 03 сентября 2010

На моей странице скрыто большинство p-разделов под заголовком h3.Если вы нажмете на них, отображается содержимое ниже.При открытии страницы отображается только первый раздел.Я использую jQuery, чтобы скрыть этот раздел, например: 

jQuery("#area h3:first").addClass("active");
jQuery("#area p:not(:first)").hide();

Но что, если в одном из разделов есть якорь, а пользователь ссылается на него с # в конце URL?Прямо сейчас он переходит в скрытый раздел, что раздражает, потому что текст не отображается.Я не хотел бы скрывать раздел, когда якорь в URL-адресе находится внутри этого раздела, например, http://domain.com/page.php#anchor_in_section_3.

Как запретить скрыть / свернуть раздел?

Подробно: после ответа 1Я обнаружил две проблемы: если вы используете .hide и .show только на одну строку кода позже, разделы остаются скрытыми.Это кажется быстрым для JQuery.Другая проблема состоит в том, что с решением, описанным в ответе 1, jQuery находит привязку, только если она не находится в дочернем теге.

Это сложнее, чем я думал:)

ТакРешение, описанное словами, состоит в том, что все разделы, кроме первого и содержащего тег привязки, должны быть скрыты.Якорь может находиться в любом (дочернем) теге раздела.

Попытка перенести это в jQuery в течение 2 часов, но без моего плохого знания jQuery.

1 Ответ

4 голосов
/ 03 сентября 2010

Чтобы получить имя привязки из URL-адреса, используйте следующую строку: 

var anchorName = document.location.hash.substring(1)

, которая получает хеш-часть URL-адреса, а затем обрезает первый символ (первый символ всегда будетсимвол хеша, "#").Вот некоторая документация по этому вопросу: Учебник по Javascript, Location.hash .Получив это, сделайте что-то вроде следующего: 

jQuery("#area p:has(a[name=" + anchorName + "])").show();

Это покажет любой абзац в #area, который содержит якорь с именем, указанным в хеш-части URL.

РЕДАКТИРОВАТЬ

Чтобы решить проблему быстрого jQuery, вы можете использовать более изумительный выбор, чтобы скрыть только те, которые в итоге будут скрыты, например: 

$("#area > p:not(:first)").filter("p:not(:has(a[name=" + anchorName + "]))").hide();

Это означает, что нужно взять все абзацы, кроме первого, затем взять подмножество тех, которые не содержат привязку с заданным значением для атрибута name, и скрыть все, что осталось.Первый абзац и любой, содержащий якорь с именем имени, останется видимым.

Вот демонстрационная версия: http://jsfiddle.net/JDQxP/

Поскольку мы не можем получить хеш из URLна jsFiddle я заменил эту строку статическими значениями.Раскомментируйте их по одному, чтобы увидеть эффект каждого из них.Обратите внимание, что якорь phasellus находится в оболочке, но селектор по-прежнему работает на нем правильно.

...