このメニューをクリックしてホバーするように変更したい。私がこれを行うと動作しません:/
さらにテキストを追加する必要がありますが、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>
回答 3 件
$(document).on('click.dropdown touchstart.dropdown', function(e)
を変更$(document).on( 'mouseenter touchstart','.dropdown', function(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>
cssの使用:
.dropdown:hover > ul{ display:block; }
関連した質問
- Webの要素が突然消える
- ブートストラップリスト-グループ:アイテムを複製することは可能ですか?
- チェックボックスとそれに対応するリストタグを削除します
- ホバーまたはクリックして、それぞれの画像を表示します
- 私はajaxとjqueryを初めて使用するので、コードの何が問題なのかわかりません
- javascriptまたはjqueryを使用したJSONへのHTML非フォームデータ
- JavaScript/HTML/CSS/JQueryを介したフィルター可能なギャラリーが機能しない
- 非同期を使用してMathJaxでテキストをプレビューする
- 動的に作成されたID(親要素に基づくIDを使用)でクリックイベントをトリガーする
- 選択オプションから値を送信
あなたのコードを理解し、最適化しようとしました。
「open」変数の必要性を理解できないので、
私はそれを削除し、あなたが望むものを達成する作業スニペットを作成しました:
(詳細については、スニペットのコメントを確認してください)
もしあればコメントしてください。
それが役に立てば幸い。