菜单单击下拉JS

Question

我正在为我的网站创建一个下拉菜单，现在可以使用，但是当我再次单击链接时，我遇到了问题，因为我对JavaScript的了解不佳，因此无法正常工作，因此我需要所有人的帮助。 谢谢你的时间

这是我的代码：

  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

以我的经验，使用列表项要容易得多，然后使用一个onclick处理程序将您定向到页面（样式更加整洁）。 也许您追求的是这样的事情？ 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');
})