[英]Menu click drop down JS
我正在為我的網站創建一個下拉菜單,現在可以使用,但是當我再次單擊鏈接時,我遇到了問題,因為我對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>
以我的經驗,使用列表項要容易得多,然后使用一個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');
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.