從菜單隱藏/顯示多個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