内容可见后无法隐藏。另外，如何缩短代码

Question

我的菜单中有 4 个 link；关于、档案、类别和 links。如果我单击 "about"，则 "about" 的内容可见。如果我随后单击 "categories"，"about" 的内容将替换为 "categories" 的内容。

目前一切顺利，但如果我点击当前可见内容的 link，我将无法隐藏内容。 Demo on jsFiddle.

$('body').on('click', '#page', function() {

    var page = $(this).attr('data');


    if($('.menu-pages').is(':visible')) {
        if(page == 'about') {
            $('#about').show();

            $('#archives').hide();
            $('#categories').hide();
            $('#links').hide();


        } else if(page == 'archives') {
            $('#archives').show();

            $('#about').hide();
            $('#categories').hide();
            $('#links').hide();


        } else if(page == 'categories') {
            $('#categories').show();

            $('#about').hide();
            $('#archives').hide();
            $('#links').hide();


        } else if(page == 'links') {
            $('#links').show();

            $('#about').hide();
            $('#archives').hide();
            $('#categories').hide();
        }



    } else {
        $('.menu-pages').show();

        if(page == 'about') {
            $('#about').show();

        } else if(page == 'archives') {
            $('#archives').show();

        } else if(page == 'categories') {
            $('#categories').show();

        } else if(page == 'links') {
            $('#links').show();
        }
    }

});

在使页面内容可见后，如何在单击菜单中的 link 时隐藏页面内容？我怎样才能使代码更短？

Answer 1

这里有一种方法可以更轻松地做到这一点

    var selector = '#' + page;
    var isVisible = $(selector).is(':visible');
    var all = $('#about, #archives, #categories, #links');
    all.hide();
    if(!isVisible)
        $(selector).show();

Fiddle

Answer 2

这是使用 .is(':visible') 完成第一部分的一种方法。

$('body').on('click', '.menu-link', function() {
  var page = $(this).attr('data');
    $('.menu-pages div').each(function() {
      if (this.id != page)
        $(this).hide();
    });
    if ($('#' + page).is(':visible'))
      $('#' + page).hide();
    else
      $('#' + page).show();
});

JSFiddle

Answer 3

这并不太难，但是您的示例代码中有一些重要的地方需要更改。 HTML 不允许 "sharing" 元素 ID。您有多个具有相同 ID ('page') 的元素。这是不合规的，应该避免。

至于 JS 部分，这将起作用（更改 ID 后）：

$('body').on('click', '[id^="page"]', function() {
    var page = $('#' + $(this).attr('data'));
    var isVisible = page.is(':visible');
    $('.menu-pages>div').hide();
    if(!isVisible)
    {
        page.show();
        $('.menu-pages').show();
    }
});

和一个固定的fiddle

内容可见后无法隐藏。另外，如何缩短代码

Can't hide content after it being visible. Also, how to shorten the code

jquery

show-hide