对.hide（）.show（）div菜单的javascript/Jquery改进_Javascript_Jquery

对.hide（）.show（）div菜单的javascript/Jquery改进

javascript jquery

对.hide（）.show（）div菜单的javascript/Jquery改进,javascript,jquery,Javascript,Jquery,我对javascript和jquery非常陌生……我已经在这个菜单上工作了一段时间，我终于“完成”了，但我得到了一些可怕的代码，我正在寻找方法来改进我的代码，使其更具可读性和功能性。任何提示和提示都会有所帮助。节省页面空间的想法是，每个div都有用户将填写的表单的不同部分下面是一些代码 <body> <div class="content"> <div class="menu" id="menu"></div&

我对javascript和jquery非常陌生……我已经在这个菜单上工作了一段时间，我终于“完成”了，但我得到了一些可怕的代码，我正在寻找方法来改进我的代码，使其更具可读性和功能性。任何提示和提示都会有所帮助。节省页面空间的想法是，每个div都有用户将填写的表单的不同部分下面是一些代码

       <body>

    <div class="content">

        <div class="menu" id="menu"></div>
        <div class="content" id="sort"></div>
        <div class="menu"id="menu1"></div>
        <div class="content" id="1sort"></div>
        <div class="menu"id="menu2"></div>
        <div class="content" id="sort2"></div>
    </div>

    <script>
        var show = true;
        var show2 = false;
        var show3 = false;

        $('#1sort').hide("fast");
        $('#sort2').hide("fast");

        $("#menu").click(function () {
            if (show == true) {
                $('#sort').hide("fast");
                $('#1sort').show("fast");
                show = false;
                show2 = true;
            } else if (show == false) {
                $('#sort').show("fast");
                $('#1sort').hide("fast");
                $('#sort2').hide("fast");
                show = true;
                show2 = false;
                show3 = false;
            }

        });

        $("#menu1").click(function () {
            if (show2 == true) {
                $('#1sort').hide("fast");
                $('#sort2').show("fast");
                show2 = false;
                show3 = true;
            } else if (show2 == false) {
                $('#1sort').show("fast");
                $('#sort').hide("fast");
                $('#sort2').hide("fast");
                show = false;
                show2 = true;
                show3 = false;
            }

        });

        $("#menu2").click(function () {
            if (show3 == false) {
                $('#1sort').hide("fast");
                $('#sort').hide("fast");
                $('#sort2').show("fast");
                show = false;
                show2 = false;
                show3 = true;
            }                      
          });       



    </script>


var show=true；
var show2=假；
var show3=假；
$（'1sort'）。隐藏（“快速”）；
$（'sort2'）。隐藏（“快速”）；
$（“#菜单”）。单击（函数（）{
if（show==true）{
$（'#sort'）。隐藏（“快速”）；
$（'1sort'）.show（“fast”）；
show=false；
show2=真；
}else if（show==false）{
$（'排序'）.show（“快速”）；
$（'1sort'）。隐藏（“快速”）；
$（'sort2'）。隐藏（“快速”）；
show=true；
show2=假；
show3=假；
}
});
$（“#菜单1”）。单击（函数（）{
如果（show2==true）{
$（'1sort'）。隐藏（“快速”）；
$（'sort2'）。show（“fast”）；
show2=假；
show3=true；
}else if（show2==false）{
$（'1sort'）.show（“fast”）；
$（'#sort'）。隐藏（“快速”）；
$（'sort2'）。隐藏（“快速”）；
show=false；
show2=真；
show3=假；
}
});
$（“#菜单2”）。单击（函数（）{
如果（show3==false）{
$（'1sort'）。隐藏（“快速”）；
$（'#sort'）。隐藏（“快速”）；
$（'sort2'）。show（“fast”）；
show=false；
show2=假；
show3=true；
}                      
});       
< /代码> 您也可以考虑使用jQuery。更多信息
这里一个有用的技术是在链接上添加一些额外的属性（最好是html5data-*
），以指示其关联的内容是什么
<div class="menu" id="menu" data-content="sort"></div>
<div class="content" id="sort"></div>
<div class="menu"id="menu1" data-content="1sort"></div>
<div class="content" id="1sort"></div>
<div class="menu" id="menu2" data-content="sort2"></div>
<div class="content" id="sort2"></div>

活生生的例子：
我不是100%确定（未测试）。。。但我认为这很接近
$(".menu").click(function (){
    $(this).next('.content').toggle();
});

您可以使用一些基本的遍历函数和.is
来确定可见性。您不需要这样的布尔变量或元素ID:
我建议创建一个我们可以玩的工作环境。到目前为止，您的标记没有内容，很难想象它的工作方式。@matt23:Updated，发现一些多余的东西。
$('.menu').click(function(){
    $('.content:visible').hide('fast');
    $('#' + $(this).data('content')).show('fast');
});

$(".menu").click(function (){
    $(this).next('.content').toggle();
});

$(".menu").click(function() {
    var $next = $(this).next(".content");  // corresponding .content element
    var isVisible = $next.is(":visible");  // is it currently visible?

    $(this).siblings(".content").hide("fast");  // hide all siblings
    $next[isVisible ? "hide" : "show"]("fast");  // toggle the corresponding .content

    if(isVisible) {
        // it was visible, so now it's hidden. Show the other .content:
        // the next or, if not available, the previous
        var $second = $next.nextAll(".content").first();
        if($second.length === 0) {
            $second = $next.prevAll(".content").first();
        }
        $second.show("fast");
    }
});