Question

我遇到过这个我试图添加的代码，但我担心我已经弄乱了它。我对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>

Answer 1

这个小提琴手上的css将帮助最初出现的所有div。你能更详细地解释其他2个错误（我似乎没有注意到它们）

Fiddler Code

Answer 2

我已经看了一下你的页面并快速尝试解决一些错误的行为。

首先，看起来您正在处理用户第二次单击导航链接的情况，方法是滑动内容div关闭，但如果用户第三次单击导航链接，则无法处理。作为用户，无论我点击链接多少次，我都希望div能够打开或关闭。

为了解决这个问题，我已经添加了一个检查目标元素是否可见的检查，并使用它来决定是打开还是关闭内容。我还添加了对show的调用和隐藏目标和curloaded元素的函数，以确保检查元素是否可见将提供预期的结果。

我的修改后的代码如下。为了简化代码，可能会整合某些案例的逻辑。

// 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;
    });

});

jQuery手风琴援助

2 个答案: