菜单单击下拉JS

Question

I am making a drop-down menu for my Website and now it work but when I click again on the links i got the problem that it not work well because I am not good in JavaScript so I need some help from all of you. Thank for your time.

Here my code:

  var hideall = $('#woman,#man,#device,#health,#living,#device'); $('#woman-li').click(function() { $(hideall).hide(), $('#woman').show(); }); $("#man-li").click(function() { $(hideall).hide(), $('#man').show(); }); $("#health-li").click(function() { $(hideall).hide(), $('#health').show(); }); 

  #woman, #man, #health, #device, #living { display: none; } 

 <div id='cssmenu'> <ul> <li class='active'><a href='#'><span>Home</span></a> </li> <li> <a href="#"> <span id="woman-li">Woman</span> </a> </li> <li> <a href="#"> <span id="man-li">Man</span> </a> </li> <li> <a href="#"> <span id="health-li">Health</span> </a> </li> </ul> <div id='woman'> <div class="tb-container"> <div class="tb-head">face</div> <div class="tb-content"> <a href="#"> <p>face</p> </a> </div> </div> </div> <div id='man'> <div class="tb-container"> <div class="tb-head">face</div> <div class="tb-content"> <a href="#"> <p>face</p> </a> </div> </div> </div> <div id='health'> <div class="tb-container"> <div class="tb-head">face</div> <div class="tb-content"> <a href="#"> <p>face</p> </a> </div> </div> </div> 

Answer 1

In my experience, it's much easier to use list items, and then have an onclick handler which directs you to the page (much neater for styling). Perhaps something like this is what you're after? https://jsfiddle.net/Domination/erdhvjvm/7/

HTML:

<div id='cssmenu'>
    <ul>
        <li id='home' class='active'>Home
            <div>Face</div>
        </li>
        <li id='woman'>Woman
            <div>Face</div>
        </li>
        <li id='man'>Man
            <div>Face</div>
        </li>
        <li id='health'>Health
            <div>Face</div>
        </li>
    </ul>
</div>

CSS:

#cssmenu ul{
    border-top:1px solid black;
    padding:0;
}
#cssmenu li{
    background:red;
    border:1px solid black;
    border-top:0;
    cursor:pointer;
    list-style-type:none;
    padding:0.5em;
}
#cssmenu li.active{
    background:green;
}
#cssmenu div{
    margin-left:15px;
}

JS:

//Hides all initially
$('#cssmenu ul li div').hide();

//On click of one of the list items
$('#cssmenu ul li').click(function(e){
    if (e.target == this){ //If you've actually clicked on it (not a child of it)

        //Stops all previous animations
        $('#cssmenu ul li div').stop(); 

        //Slides all others up
        $(this).siblings().find('div').slideUp(); 

        //Removes class from others
        $(this).siblings().removeClass('active'); 

        //Slides selected down or up (toggles it)
        $(this).find('div').slideToggle();

        //Adds class to the element
        $(this).addClass('active');
    }
});

//On click on the children of the menu
$('#cssmenu ul li div').click (function(){
    alert("You clicked on a child");
    alert("Go to link: " + $(this).attr('link'))

    //Uncomment to enable links
    //window.location.href = $(this).attr('link');
})