0

我对 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>
4

4 回答 4

1

这里有一个有用的技术是在链接上装饰一些额外的属性（最好是 html5 data-*）以指示它的关联内容是什么。

<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>

然后，您可以在单击项目时使用它来隐藏当前可见的项目，并显示所需的项目：

$('.menu').click(function(){
    $('.content:visible').hide('fast');
    $('#' + $(this).data('content')).show('fast');
});

现场示例：http: //jsfiddle.net/hAbPa/

于 2012-06-28T11:47:27.413 回答
1

您可以使用一些基本的遍历函数，并.is确定可见性。你不需要布尔变量也不需要元素ID：http: //jsfiddle.net/K2sqy/2/。

$(".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");
    }
});
于 2012-06-28T12:00:54.147 回答
0

您也可以考虑使用 jquery .toggle()。更多信息在这里。

$('#foo').toggle(showOrHide);
is equivalent to:

if ( showOrHide == true ) {
  $('#foo').show();
} else if ( showOrHide == false ) {
  $('#foo').hide();
}
于 2012-06-28T11:44:42.033 回答
-1

我不是 100% 确定（未经测试）......但我认为这非常接近。

$(".menu").click(function (){
    $(this).next('.content').toggle();
});
于 2012-06-28T11:48:58.400 回答