Как оформить Список с подсписком и подсписком должен отображаться при наведении на родительский список
Да, вы можете просто указать ваш тэг src в файл списка воспроизведения .m3u. Файл .m3u прост в построении -
#hosted mp3's need absolute paths but file system links can use relative paths
http://servername.com/path/to/mp3.mp3
http://servername.com/path/to/anothermp3.mp3
/path/to/local-mp3.mp3
----- UPDATE -----
Ну, это список воспроизведения Файлы m3u поддерживаются на на iPhone, но не на многое другое, включая Safari 5, что печально. Я не уверен в телефонах Android, но я сомневаюсь, что они поддерживают его, поскольку Chrome не делает этого. Извините за дезинформацию.
3 ответа
Pure CSS
Используйте :hover , чтобы изменить отображение .records для блокировки при наведении курсора на строки просмотра.
.records {
display: none;
}
.view:hover .records {
display: block;
}<div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li class="view">View Rows
<ul class="records">
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>Чистый Javascript
И, как всегда, есть несколько способов сделать этот. Вы можете использовать чистый JavaScript, как показано ниже. Это использует .querySelectorAll() для выбора элементов, .addEventListener() , чтобы сделать что-то на mouseover и mouseleave . Очевидно, что это намного сложнее и сложнее, чем в предыдущем методе, но это оставляет место для гораздо большей настройки.
var records = document.querySelectorAll(".records");
var view = document.querySelectorAll(".view")[0];
view.addEventListener("mouseover", function() {
records.forEach(e => {
e.style.display = "block";
});
});
view.addEventListener("mouseleave", function() {
records.forEach(e => {
e.style.display = "none";
});
});.records {
display: none;
}<div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li class="view">View Rows
<ul class="records">
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>jQuery
И, конечно же, есть jQuery метод. Это использует .hover() , чтобы определить, когда вы наводите курсор на текст, а затем вы используете .show() , чтобы показать li. Затем вы используете .mouseout() , чтобы определить, когда выходите из текста, и , .hide(), , чтобы скрыть текст.
$(".records").hide();
$(".view").hover(function() {
$(".records").show();
});
$(".view").mouseout(function() {
$(".records").hide();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li class="view">View Rows
<ul class="records">
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>ul {
background: #333;
}
ul li {
position: relative;
list-style: none;
display: inline-block;
color: white;
}
ul ul {
position: absolute;
left: 0;
right: 0;
top: 100%;
display: none;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
ul ul li {
display: block;
width: 100%;
}<div>
<ul>
<li>Add Rows</li>
<li>DeleteRows</li>
<li>View Rows
<ul>
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</ul>
</div>Вы можете использовать сначала видимость ul скрытый и li: hover ul видимость: видимый для отображения при наведении списка родителей.
li:hover ul {
visibility: visible;
}
ul {
visibility: hidden;
} <div>
<li>Add Rows</li>
<li>DeleteRows</li>
<li>View Rows
<ul>
<li>View New Records</li>
<li>View Old Records</li>
</ul>
</li>
</div>