Javascript jQuery手风琴助手

我遇到过我试图添加的代码，但我担心我把它弄得一团糟。我对Jquery或web设计不是很有经验，我需要帮助找到我做错了什么，以及如何提高效率

有没有更好/更有效的方法来编写此代码

它有一些bug

• 加载时显示所有div。我希望它只显示一个我可以选择的选项。
  
• 当它为文本设置动画时，由于某种原因文本会跳跃。
  
• 有时div会向上而不是向下设置动画

下面是一个链接，指向它现在的样子：

$（文档）.ready（函数（）{
//当前加载的节
var curLoaded='about'；
//导航触发器
$（'#导航栏a'）。每个（函数（）{
变量$this=$（this）
var target=$this.attr（'href'）.split（'#'）[1]；
var$contentContainer=$（“#contentContainer”）；
var-oldPos=0；
var-newPos=200；
//向每个a标记添加一个单击处理程序
$this。单击（函数（）{
//如果容器未打开，则打开它
if（$contentContainer.css（'height'）=''）{
//触发动画
$contentContainer.animate({
高度：newPos
}，“慢”，函数（）{
//淡入内容
$（'#'+target）.fadeIn（）；
});
}否则{
if（curLoaded==目标）{
$contentContainer.animate({
高度：oldPos
}，“慢”，函数（）{
$（'#content div'）.hide（）；
});
}否则{
$contentContainer.animate({
高度：oldPos
}，“慢”，函数（）{
$（'#content div'）.hide（）；
$contentContainer.animate({
高度：newPos
}，“慢”，函数（）{
$（'#'+target）.fadeIn（）；
});
});
}
}
卷发=目标；
返回false；
});
});
});

此小提琴手上的css将帮助所有div最初显示。你能更详细地解释另外两个错误吗（我似乎没有注意到）

---

此小提琴手上的css将帮助所有div最初显示。你能更详细地解释另外两个错误吗（我似乎没有注意到）

---

我查看了您的页面，并快速尝试解决了一些错误行为

首先，看起来您正在处理用户通过滑动内容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;
    });

});

---

我查看了您的页面，并快速尝试解决了一些错误行为

首先，看起来您正在处理用户通过滑动内容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;
    });

});

---

该网站可能是一个更好的获取你想要的反馈类型的地方。所以，当你被困在一个特定的问题和一个特定的答案上时，它最有助于帮助你。如果有可能进行广泛的公开讨论，那么这可能并不适合。查看最适合此站点的问题类型。@MerlynMorgan-Graham:根据，调试问题不应该存在。纳特金斯：我认为应该首先修复bug，然后将其发布到CodeReview进行全面审查。因此，请编辑此问题，使其仅包含有关调试（而非有效性）的问题，以适合此问题。（我想关于CodeReview的问题会因为bug而被关闭，但是当bug被修复时，请随时向CR发帖。）该站点可能是获得您想要的反馈类型的更好的地方。所以，当你被困在一个特定的问题和一个特定的答案上时，它最有助于帮助你。如果有可能进行广泛的公开讨论，那么这可能并不适合。查看最适合此站点的问题类型。@MerlynMorgan-Graham:根据，调试问题不应该存在。纳特金斯：我认为应该首先修复bug，然后将其发布到CodeReview进行全面审查。因此，请编辑此问题以继续