jQuery аккордеонная помощь - PullRequest
Новая
       3

jQuery аккордеонная помощь

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

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

Есть ли лучший / более эффективный способ написания этого кода?

В нем есть ошибки ...

  • Отображает все div при загрузке. Я бы хотел, чтобы он просто показал, что я могу выбрать.
  • Когда он оживляет, текст почему-то прыгает.
  • Иногда div оживляют, но не вниз.

Вот ссылка на то, как это выглядит сейчас: http://dl.dropbox.com/u/14080718/Final/NeedHelp.html

    <script>
    $(document).ready(function() {
        // the currently loaded section
        var curLoaded = 'about';

        // navigation trigger
        $('#navbar a').each(function() {
            var $this = $(this)
            var target = $this.attr('href').split('#')[1];
            var $contentContainer = $('#contentContainer');
            var oldPos = 0;
            var newPos = 200;

            // add a click handler to each A tag
            $this.click(function(){
                // if the container isn't open, then open it
                if ($contentContainer.css('height') == '') {
                    // trigger the animation
                    $contentContainer.animate({
                        height: newPos
                    },"slow", function(){
                        // fade in the content
                        $('#' + target).fadeIn();
                    });
                } else {
                    if (curLoaded == target) {
                        $contentContainer.animate({
                            height: oldPos
                        },"slow", function(){
                            $('#content div').hide();
                        });
                    } else {
                        $contentContainer.animate({
                            height: oldPos
                        },"slow", function(){
                            $('#content div').hide();
                            $contentContainer.animate({
                                height: newPos
                            },"slow", function(){
                                $('#' + target).fadeIn();
                            });
                        });
                    }
                }
                curLoaded = target;

                return false;
            });
        });
    });
    </script>

Ответы [ 2 ]

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

CSS на этом скрипаче поможет со всеми первыми делами, которые будут отображаться. Можете ли вы объяснить другие 2 ошибки более подробно (кажется, я их не замечаю)

Код скрипача

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

Я посмотрел на вашу страницу и быстро попытался разобраться с некоторыми ошибочными действиями.

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

Чтобы исправить это, я добавил проверку того, является ли целевой элемент или нетвиден, и я использую это, чтобы решить, открывать или закрывать содержимое.Я также добавил вызовы в функции show и hide для целевого и сокращенного элементов, чтобы гарантировать, что проверка того, является ли элемент видимым, даст ожидаемый результат.

Мой исправленный код приведен ниже.Вполне возможно, что логика для некоторых случаев может быть объединена для упрощения кода. 

// navigation trigger 
$('#navbar a').each(function() {
    var $this = $(this);
    var target = $this.attr('href').split('#')[1];
    var $contentContainer = $('#contentContainer');
    var oldPos = 0;
    var newPos = 200;

    // add a click handler to each A tag 
    $this.click(function() {
        // if the container isn't open, then open it 
        if ($contentContainer.css('height') === '') {
            // trigger the animation 
            $contentContainer.animate({
                    height: newPos
                }, "slow", function() {
                    // fade in the content 
                    $('#' + target).show().fadeIn();
                });
        } else {
            if (curLoaded == target) {
                if ($('#' + target).is(':visible')) {
                    $contentContainer.animate({
                            height: oldPos
                        }, "slow", function() {
                            $('#' + curLoaded).hide();
                            $('#content div').hide();
                        });
                } else {
                    $contentContainer.animate({
                            height: newPos
                        }, "slow", function() {
                            // fade in the content 
                            $('#' + target).show().fadeIn();
                        });
                }
            } else {
                $contentContainer.animate({
                        height: oldPos
                    }, "slow", function() {
                        $('#' + curLoaded).hide();
                        $('#content div').hide();
                        $contentContainer.animate({
                                height: newPos
                            }, "slow", function() {
                                $('#' + target).fadeIn();
                            });
                    });
            }
        }

        curLoaded = target;

        return false;
    });

});
...