好的，我有一個“懸停時”顯示的下拉列表，有沒有辦法將其更改為“單擊時”顯示。理想情況下，僅限 CSS，但也對 JS 選項開放。如果我可以把船推得更遠(yuǎn)，我還希望在右上角有一個十字來關(guān)閉下拉列表。我在這里做了一個小提琴，以便您可以看到我當(dāng)前的“懸?！痹O(shè)置當(dāng)前CSSul {padding: 15px;list-style: none;text-align: center;}.navigationWrap ul li {width: 100%;float: left;color: #000;font-size: 16px;position: relative;}.navigationWrap ul li a {text-decoration: none;color: #000;display: block;}.navigationWrap ul li a:hover {color: #000;background-color: #e6ffe6;}.navigationWrap ul li ul.subNav {position: absolute;width: 95%;padding: 10px;background-color: #fff; border: #4399fc solid 1px;display: none;z-index: 999;left: 0;top: 100%;text-align: left;max-height: 350px;overflow: auto;overflow-x: hidden;}.navigationWrap ul li ul.subNav li { float: left; width: 100%; font-size: 20px; letter-spacing: 1px; padding-bottom: 10px; } .navigationWrap ul li ul.subNav a { float: left; width: 100%; transition: all 0.3s ease-in-out; display: block; } .navigationWrap ul li ul.subNav li a:hover { color: #000; padding-left: 10px; } .navigationWrap ul li ul.subNav li.active a { color: #04A000; } .navigationWrap ul li.dropdown:hover ul.subNav { display: block; }
2 回答
慕后森
TA貢獻1802條經(jīng)驗 獲得超5個贊
使用 JavaScript 是很有可能的。我是用 jQuery 做的。dropdown如果用戶單擊容器外部，我就會關(guān)閉dropdown。
這是JS代碼。
$(function(){
$('.dropdown .dropdown-toggle').on('click', function(e){
e.preventDefault;
e.stopPropagation;
$(this).parents('.dropdown').toggleClass('show');
});
// Remove dropdown if click outside of dropdown
const $menu = $('.dropdown');
$(document).mouseup(e => {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.removeClass('show');
}
});
});
CSS 改變。
/* Before */
.navigationWrap ul li.dropdown:hover ul.subNav {
display: block;
}
/* After */
.navigationWrap ul li.dropdown.show ul.subNav {
display: block;
}
這是 HTML。
<div class="navigationWrap">
<ul>
<li class="dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">☰ See Options</a>
<ul class="subNav">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li>
<p></p>
</li>
<li><a href="#">Option 6</a></li>
<li><a href="#">Option 7</a></li>
</ul>
</li>
</ul>
</div>
這是CodePen。
- 2 回答
- 0 關(guān)注
- 144 瀏覽
添加回答
舉報
0/150
提交
取消