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();

以下是DEMO

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

正如您的所有内容＆＃39;后缀元素位于#content内，您可以使用$('#content').children().hide();或等于$('#content > *').hide();

轻松隐藏所有元素

所有人的内容＆＃39;后缀元素是唯一的，那么为什么不使用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 DEMO

注意：如果您不想使用id或/并更改href，那么您可以选择这样的目标元素：$('.'+$(this).attr('id')+content).slideToggle();保持您的HTML不变现在

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

更新2 ：我添加了.not()功能，以便不隐藏实际定位的元素，因此.slideToggle()现在可以正常工作了 - JSFiddle

从菜单中隐藏/显示多个div

4 个答案: