我想将此菜单更改为可单击以悬停。当我这样做时不起作用:/
我必须添加更多文字,但对于熟悉 javascript 的人来说,问题很简单。 对不起,我的语言不好。 我必须添加更多文本,但对于熟悉 javascript 的人来说,问题很简单。 对不起,我的语言不好。 我必须添加更多文本,但对于熟悉 javascript 的人来说,问题很简单。 抱歉我的语言不好。
(function($, undefined)
{
var open = [];
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
$(document).on('click.dropdown touchstart.dropdown', function(e)
{
// Close the last open dropdown if click is from outside the target dropdown
if ( open.length && ( ! opts.nest || ! open[ open.length - 1 ].find( e.target ).length ) )
{
open.pop().removeClass( opts.open );
}
var $this = $(e.target);
// If target is a dropdown then toggle it...
if ( $this.hasClass( opts.toggle ) )
{
e.preventDefault();
$this = $this.closest( opts.selector );
if ( ! $this.hasClass( opts.open ) )
{
open.push( $this.addClass( opts.open ) );
}
else
{
open.pop().removeClass( opts.open );
}
}
});
})(jQuery);
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column
{
display: table-cell;
background-color: red;
}
.dropdown {
position:relative;
min-width:100%;
background:#ccc;
display: inline-block;
}
.dropdown a {
display:block;
text-decoration:none;
color:#333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding:0;
}
/* dropdown */
.dropdown-menu {
position:absolute;
top:100%;
right:0;
left:0;
display:none;
margin:0;
padding:0;
list-style-type:none;
background:#ccc;
}
/* options */
.dropdown-menu .option a {
}
.dropdown-menu .option a:hover {
background-color:#aaa;
}
/* open */
.dropdown-open {
z-index:400;
}
.dropdown-open > .dropdown-menu {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
<a href="#locale" class="dropdown-toggle">English</a>
<ul class="dropdown-menu">
<li class="option"><a href="#">French</a></li>
<li class="option"><a href="#">German</a></li>
<li class="option"><a href="#">Arabic</a></li>
<li class="option"><a href="#">Chinese</a></li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
<a href="#locale" class="dropdown-toggle">English</a>
<ul class="dropdown-menu">
<li class="option"><a href="#">French</a></li>
<li class="option"><a href="#">German</a></li>
<li class="option"><a href="#">Arabic</a></li>
<li class="option"><a href="#">Chinese</a></li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
<a href="#locale" class="dropdown-toggle">English</a>
<ul class="dropdown-menu">
<li class="option"><a href="#">French</a></li>
<li class="option"><a href="#">German</a></li>
<li class="option"><a href="#">Arabic</a></li>
<li class="option"><a href="#">Chinese</a></li>
</ul>
</div>
</div>
</div>
最佳答案
将 $(document).on('click.dropdown touchstart.dropdown', function(e)
更改为 $(document).on( 'mouseenter touchstart','.dropdown ', 函数(e) {
演示
(function($, undefined) {
var open = [];
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
$(document).on( 'mouseenter touchstart','.dropdown', function(e) {
// Close the last open dropdown if click is from outside the target dropdown
if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
open.pop().removeClass(opts.open);
}
var $this = $(e.target);
// If target is a dropdown then toggle it...
if ($this.hasClass(opts.toggle)) {
e.preventDefault();
$this = $this.closest(opts.selector);
if (!$this.hasClass(opts.open)) {
open.push($this.addClass(opts.open));
} else {
open.pop().removeClass(opts.open);
}
}
});
})(jQuery);
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.dropdown {
position: relative;
min-width: 100%;
background: #ccc;
display: inline-block;
}
.dropdown a {
display: block;
text-decoration: none;
color: #333;
}
/* toggle */
.dropdown .dropdown-toggle {
padding: 0;
}
/* dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
background: #ccc;
}
/* options */
.dropdown-menu .option a {}
.dropdown-menu .option a:hover {
background-color: #aaa;
}
/* open */
.dropdown-open {
z-index: 400;
}
.dropdown-open>.dropdown-menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Row">
<div class="Column">
<div id="locale" class="dropdown">
<a href="#locale" class="dropdown-toggle">English</a>
<ul class="dropdown-menu">
<li class="option"><a href="#">French</a></li>
<li class="option"><a href="#">German</a></li>
<li class="option"><a href="#">Arabic</a></li>
<li class="option"><a href="#">Chinese</a></li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
<a href="#locale" class="dropdown-toggle">English</a>
<ul class="dropdown-menu">
<li class="option"><a href="#">French</a></li>
<li class="option"><a href="#">German</a></li>
<li class="option"><a href="#">Arabic</a></li>
<li class="option"><a href="#">Chinese</a></li>
</ul>
</div>
</div>
<div class="Column">
<div id="locale" class="dropdown">
<a href="#locale" class="dropdown-toggle">English</a>
<ul class="dropdown-menu">
<li class="option"><a href="#">French</a></li>
<li class="option"><a href="#">German</a></li>
<li class="option"><a href="#">Arabic</a></li>
<li class="option"><a href="#">Chinese</a></li>
</ul>
</div>
</div>
</div>
关于javascript - 如何将此点击菜单更改为悬停菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50528215/