jQuery获取所选元素的类

Question

I have a bunch of divs that are buttons on my site. When I click a button I want a sub nav to show. All the sub navs have the class of "subNab" but also have a class the same as the main nav appended with "Sub". For example I have:

<div class="navBox audits">
    <p>Audits</p>
</div>

<div class="subNav auditsSub">
    <div class="navBox">
        <p>Audits Sub1</p>
    </div>
    <div class="navBox">
        <p>Audits Sub2</p>
    </div>
</div>

Currently I have the sub nav hiding on page load and showing on a click function, along with hiding the subNav again so they don't just stack up. I have the below code with the different class names for each button. There's got to be an easier way.

    $(".audits").click(function(){
        $(".subNav").hide();
        $(".auditsSub").fadeIn("slow"); 
        $("#adSlider").hide();
    });
    $(".billing").click(function(){
        $(".subNav").hide();
        $(".billingSub").fadeIn("slow"); 
        $("#adSlider").hide();
    });
    $(".consulting").click(function(){
        $(".subNav").hide();
        $(".consultingSub").fadeIn("slow"); 
        $("#adSlider").hide();
    });

Thanks in advance!

Answer 1

Can you give me the full code so I can see exactly how you want to handle your menu. If you organize your code correctly you don't have to give each trigger button a class. Maybe this is what you are looking for: $(document).ready( function() {

$(document).ready(function(){
$('.submenu').hide();
$('.menu ul li a').click(function(event){
    event.preventDefault(); // prevents link from redirrecting
    $('.submenu').hide(); // hide all submenu items
    $(this).siblings('.submenu').slideDown (); // show only child submenu
});

});

http://jsfiddle.net/75d67hLq/1/