菜单点击下拉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'); 
})