从菜单隐藏/显示多个div

Question

我有一个菜单（mainnav）的简单样机设置，当单击菜单项（menuitem）之一时，它显示了一个隐藏的div。 以下工作正常，但我想知道是否有一种方法可以组合某些功能。

这是我的html：

<div id="mainnav">
<a class="menuitem" id="home" href="#">Home</a>
        <a class="menuitem" id="about" href="#">About</a>
        <a class="menuitem" id="contact" href="#">Contact</a>
</div>

<div id="maincontent">
<div id="slider1_container">
<p>SLIDESHOW_CODE</p>
</div>
<div id="content">
<p class="aboutcontent"><b>ABOUT:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="contactcontent"><b>CONTACT:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="findcontent"><b>FIND:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="find">
            <p><a href="#">Find...</a></p>
</div>
</div>

这是脚本：

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        $(".contactcontent").hide();
        $(".findcontent").hide();
        $("#slider1_container").hide();
        $(".aboutcontent").slideToggle();
    });
    $('#contact').click(function(){
        $(".aboutcontent").hide();
        $(".findcontent").hide();
        $("#slider1_container").hide();
        $(".contactcontent").slideToggle();
    });
    $('.find').click(function(){
        $(".aboutcontent").hide();
        $(".contactcontent").hide();
        $("#slider1_container").hide();
        $(".findcontent").slideToggle();
    });
    $('#home').click(function(){
        $(".aboutcontent").hide();
        $(".contactcontent").hide();
        $(".findcontent").hide();
        $("#slider1_container").slideToggle();
    });
});

谢谢！

Answer 1

尝试这样：

 $(".findcontent,.contactcontent,#slider1_container").hide();

这是演示

Answer 2

您至少可以组合选择器：

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        $(".contactcontent, .findcontent, #slider1_container").hide();
        $(".aboutcontent").slideToggle();
    });
    $('#contact').click(function(){
        $(".aboutcontent, .findcontent, #slider1_container").hide();
        $(".contactcontent").slideToggle();
    });
    $('.find').click(function(){
        $(".aboutcontent, .contactcontent, #slider1_container").hide();
        $(".findcontent").slideToggle();
    });
    $('#home').click(function(){
        $(".aboutcontent, .contactcontent, .findcontent").hide();
        $("#slider1_container").slideToggle();
    });
});

或者，对共享代码使用一个函数：

$(document).ready(function(){
    $(".aboutcontent, .contactcontent, .findcontent").hide();   
    $('#about').click(function(){
        toggle(".contactcontent, .findcontent, #slider1_container", ".aboutcontent");
    });
    $('#contact').click(function(){
        toggle(".aboutcontent, .findcontent, #slider1_container", ".contactcontent");
    });
    $('.find').click(function(){
        toggle(".aboutcontent, .contactcontent, #slider1_container", ".findcontent");
    });
    $('#home').click(function(){
        toggle(".aboutcontent, .contactcontent, .findcontent", "#slider1_container");
    });
});

function toggle(hide, toggle){
    $(hide).hide();
    $(toggle).slideToggle();
}

Answer 3

您可以尝试将它们全部隐藏起来，并仅显示所需的项目。

演示： http ： //jsfiddle.net/wsroet8u/

function HideThem(){
  $(".aboutcontent, .contactcontent, .findcontent, #slider1_container").hide();     
};   

HideThem();  
$("#slider1_container").show();  

$('#about').click(function(){
    HideThem();
    $(".aboutcontent").slideToggle();
});

$('#contact').click(function(){
    HideThem();
    $(".contactcontent").slideToggle();
});

$('.find').click(function(){
    HideThem();
    $(".findcontent").slideToggle();
});

$('#home').click(function(){
    HideThem();
    $("#slider1_container").slideToggle();    
});

Answer 4

由于所有“内容”后缀元素都在#content内部，因此您可以一次使用$('#content').children().hide();轻松隐藏所有元素$('#content').children().hide(); 或等于$('#content > *').hide();

你们所有带有“内容”后缀的元素都是唯一的，那么为什么不使用id代替class ？ 然后，单击可显示链接指向的元素：

HTML：

<a class="menuitem" id="about" href="#aboutcontent">About</a>
...
<p id="aboutcontent"><b>ABOUT:</b>Lorem ipsum dolor sit amet...</p>

JQuery的：

$('#mainnav a, .find a').click(function () {
    $('#content').children().hide();
    $($(this).attr('href')).slideToggle();
});

JSFiddle演示

注意：如果您不想使用id或/和更改href则可以选择类似的目标元素： $('.'+$(this).attr('id')+content).slideToggle(); 保持HTML不变。

更新：我没有意识到#slider1_container在#content之外，这是更新的JSFiddle 。

更新2：我添加了.not()函数以不隐藏实际目标元素，因此.slideToggle()现在可以正常工作-JSFiddle