Иконка выпадающего меню.
Всем привет. Сделал менюшку
<li><a class="page-link" href="#testimonials">Testimonials<i class="caret ion-android-add"></i></a></li> <li><a class="page-link" href="#pricing">Pricing<i class="caret ion-android-add"></i></a></li> <li><a class="page-link">Blog<i class="caret ion-android-add"></i></a> <ul class="dropdown-menu"> <li><a href="#">Blog11111</a></li> <li><a href="#">Blog22222</a></li> <li><a href="#">Blog33333</a></li> </ul> </li> и в менюшку добавил значек, который должен быть виден, если есть в наличии выпадающее меню <i class="caret ion-android-add"></i>. Однако не пойму как сделать, чтобы этот значек отображался только при условии, если у пункта меню с этим значком есть выпадающее меню??? |
LLIypuk,
$('.page-link').parent().each(function(i, el) {
if (!$(el).children().eq(-1).is('.dropdown-menu')) {
$(el).find('.caret').hide();
}
});
|
css
.page-link > i{
display: none;
}
js
$('li').has("ul.dropdown-menu").find('i').show();
|
или так
$('.page-link>i').hide();
$('li').has("ul.dropdown-menu").find('.page-link>i').show();
|
или так :)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.ion-android-add{
display: none;
color:#CC0000;
}
.ion-android-add:after{
content: "+"
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".dropdown-menu").prev().find("i.ion-android-add").show()
});
</script>
</head>
<body>
<ul>
<li><a class="page-link" href="#testimonials">Testimonials<i class="caret ion-android-add"></i></a></li>
<li><a class="page-link" href="#pricing">Pricing<i class="caret ion-android-add"></i></a></li>
<li><a class="page-link">Blog<i class="caret ion-android-add"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Blog11111</a></li>
<li><a href="#">Blog22222</a></li>
<li><a href="#">Blog33333</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:31. |