JQuery Powered Аккордеон Отсутствует Якорь Ссылка Функциональность - PullRequest
Новая
       67

JQuery Powered Аккордеон Отсутствует Якорь Ссылка Функциональность

2 голосов
/ 16 января 2012

Для сегодняшнего вопроса у меня есть очень маленький аккордеон, который я построил с помощью библиотеки jQuery Tools .Я обнаружил, что инструменты jQuery предлагают мне необходимую функциональность, и занимают гораздо меньше места, чем пользовательский интерфейс jQuery объемом 800 КБ.Не говоря уже о более плавной и качественной анимации.

Однако сейчас мы начинаем заполнять сайт, и я немного озадачен тем, что ссылки в моем аккордеоне не работают.Я использовал простой href = "#" для своих заполнителей, и внезапно они не вернут меня в начало страницы.

HTML: 

<div class="col">
            <ul id="accordion" class="footerNav">
                <li class="topLevel">
                    <a class="current" href="#">Autos</a>
                    <ul id="autos" class="pane">
                        <li><a href="#">News</a></li>
                        <li><a href="#">Reviews</a></li>
                        <li><a href="#">Car Tech</a></li>
                        <li><a href="#">Fuel Economy &amp; Safety</a></li>
                        <li><a href="#">Buying &amp; Selling</a></li>
                        <li><a href="#">Everything Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Lifestyle</a>
                    <ul id="lifestyle" class="pane">
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Travel</a></li>
                        <li><a href="#">Shopping</a></li>
                        <li><a href="#">Everything Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">People</a>
                    <ul id="people" class="pane">
                        <li><a href="#">Who You Know</a></li>
                        <li><a href="#">Who You Should Know</a></li>
                        <li><a href="#">Everyhone Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Tech</a>
                    <ul id="tech" class="pane">
                        <li><a href="#">Business</a></li>
                        <li><a href="#">Pleasure</a></li>
                        <li><a href="#">Everyhting Else</a></li>
                    </ul>
                </li>
                <li class="topLevel">
                    <a href="#">Trends</a>
                    <ul id="trends" class="pane">
                        <li><a href="#">Online</a></li>
                        <li><a href="#">Offline</a></li>
                        <li><a href="#">Everyhting Else</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>

CSS: 

footer .col ul.footerNav li {
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:100;
    text-decoration:none;
    list-style: url(../../images/footer_bullet_1.png);
}
footer .col ul.footerNav li.topLevel {
    list-style: url(../../images/footer_bullet_3.png);
}
footer .col ul.footerNav li.topLevel:hover {
    cursor:pointer;
    list-style: url(../../images/footer_bullet_2.png);
}
footer .col ul.footerNav li.topLevel:active {
    list-style: url(../../images/footer_bullet_2.png);
}

footer .col ul.footerNav li a {
    display:block;
    color:#ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:100;
    text-decoration:none;
    outline:none;
}
footer .col ul.footerNav li a:hover {
    text-decoration:underline;
}

JAVASCRIPT: 

$(document).ready(function() {

            // Footer Accordion
            $("#accordion").tabs("#accordion ul.pane", {
                tabs: 'span', 
                effect: 'slide', 
                initialIndex: 0
            });

        });

Ознакомиться с демонстрацией сайта вы можете здесь:

http://rawdesigns.net/web2carz/

Гармошкасуществует в центральной колонке нижнего колонтитула.

Ответы [ 3 ]

1 голос
/ 16 января 2012

вы используете не тот инструмент, здесь

вы используете инструмент Tab для задачи Tree View, ваша html структура полностью отличается от той, которая нужна библиотеке для работы.

как и сейчас, вы обрабатываете все теги </a> как «вкладки», и поэтому они никуда не денутся, они просто будут пытаться найти ближайший связанный с ним контент, например, для </div>, который, очевидно,не там.

вам просто нужен этот код для создания этого Tree View

/ * CSS * / .pane {display: none} 

$(function() {
    $('li.topLevel a:first-child').click(function(e) {
        e.preventDefault();
        $('.pane:visible').slideUp('slow');
        $(this).next('.pane:not(:visible)').slideDown('slow');
    });
});
0 голосов
/ 16 января 2012

Используйте и укажите свой тег "#top" в верхней части страницы.

Кроме того, теперь вы можете использовать идентификаторы элементов вместо именованных якорей: http://www.bennadel.com/blog/822-Using-BODY-ID-As-A-Back-To-Top-Page-Anchor.htm

0 голосов
/ 16 января 2012

Я думаю, что это происходит от самого плагина. Глядя на исходный код , кажется, что можно создать перекрестные ссылки, и это делается следующим образом: 

// cross tab anchor link
panes.find("a[href^=#]").bind("click.T", function(e) {
    self.click($(this).attr("href"), e);        
});

Находит все <a> на всех панелях с href, начиная с #, связывает событие щелчка, и обработчик вызывает внутренний метод "щелчка" self.click, используемый для переключения вкладок.

Ваши ссылки попадают в этот сценарий и поэтому считаются ссылками кросс-таблицы.

Я не думаю, что изменение ссылок на <a href="#top"> решит проблему, так как они по-прежнему будут рассматриваться как ссылки в виде перекрестных таблиц. он просто не будет работать как таковой или как вы хотите.

...