![](/img/trans.png)
[英]Horizontal dropdown with hover to vertical dropdown with click on navigation bar implementation
[英]Create dropdown navigation on hover and on click
我有一個使用CSS和jQuery創建的下拉菜單,我想在懸停和click 上進行下拉。
默認情況下,我希望在單擊時顯示下拉列表,但是給定類.dropdown-hover
我希望將其.dropdown-hover
時顯示。
這是我目前擁有的JSFiddle: http : //jsfiddle.net/dR8hL/1/
現在,無論將什么類應用於下拉菜單,它都會顯示在懸停上,我不確定如何解決。
的HTML
<div class="dropdown dropdown-hover">Dropdown on hover
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
<div class="dropdown">Dropdown on click
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
的CSS
.dropdown {
cursor: pointer;
outline: none;
position: relative;
width: auto;
}
.dropdown .dropdown-menu {
background-color: #fff;
border: 1px solid #eee;
border-radius: inherit;
font-weight: inherit;
left: 0;
margin-left: 0px;
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
text-transform: none;
width: 200px;
z-index: 99999;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.dropdown .dropdown-menu a { text-decoration: none; }
.dropdown .dropdown-menu p {
margin: 0;
padding: 10px 15px;
}
.dropdown .dropdown-menu span { line-height: inherit; }
.dropdown ul.dropdown-menu { list-style-type: none; }
.dropdown .dropdown-menu li {
display: block;
padding: 5px 10px;
}
.dropdown .dropdown-menu li:hover { background-color: #f3f8f8; }
.dropdown.dropdown-active .dropdown-menu {
opacity: 1;
pointer-events: auto;
}
jQuery的
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
// Determine if dropdown is on hover or on click
if ($(".dropdown").hasClass("dropdown-hover")) {
// Toggle .dropdown-active on hover
$(".dropdown").mouseenter(function (event) {
$(this).addClass("dropdown-active");
event.stopPropagation();
});
$(".dropdown-menu").mouseleave(function () {
$(".dropdown").removeClass("dropdown-active");
});
} else {
// Toggle .dropdown-active on click
obj.dd.on('click', function (event) {
$(this).toggleClass('dropdown-active');
event.stopPropagation();
});
}
}
}
$(function () {
var dd = new DropDown($('.dropdown'));
$(document).click(function () {
// Remove class from all dropdowns
$('.dropdown').removeClass('dropdown-active');
});
});
您不僅可以將.dropdown-hover類作為目標。 您不需要if語句
$(".dropdown-hover").mouseenter(function (event) {
event.stopPropagation();
$(this).addClass("dropdown-active");
});
$(".dropdown-hover").mouseleave(function () {
$(".dropdown").removeClass("dropdown-active");
});
// Toggle .dropdown-active on click
obj.dd.on('click', function (event) {
event.stopPropagation();
$(this).toggleClass('dropdown-active');
});
更新了JSFiddle http://jsfiddle.net/47mSS/
您可以通過簡單的CSS和少量JS實現此功能-
工作演示-http: //codepen.io/nitishdhar/pen/rpqct
要使用的HTML代碼段
<ul class="drop">
<li>Dropdown on Hover
<ul>
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</li>
</ul>
<ul class="drop-on-click">
<li>Dropdown on Click
<ul>
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</li>
</ul>
您需要將“ drop”類分配給懸停時應打開的菜單。 另外,僅將“單擊時放置”類分配給您要在單擊時打開的類。
重要的CSS
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
ul.drop li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
演示鏈接中有更多CSS,但是大部分可以處理UI方面的內容。
現在,處理點擊情況的JS-
$(document).ready(function() {
$('.drop-on-click').click(function(){
$(this).toggleClass('drop');
});
$('.drop-on-click ul li').hover(
function() {
$('.drop-on-click').addClass('drop');
}, function() {
$('.drop-on-click').removeClass('drop');
}
);
});
因此,基本上,JS會添加已處理的類'drop',該類將使菜單具有根據編寫的CSS下拉菜單的屬性。 現在,當我們移到下拉菜單上時,我們需要保留drop類,直到移到li元素上方為止,一旦移出,我們將刪除該類。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.