Форум

LLIypuk · #1 (**permalink**) 20.09.2017, 21:12

Всем привет. Сделал менюшку

<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>.
Однако не пойму как сделать, чтобы этот значек отображался только при условии, если у пункта меню с этим значком есть выпадающее меню???

Rasy · #2 (**permalink**) 20.09.2017, 21:24

LLIypuk,

$('.page-link').parent().each(function(i, el) {
  if (!$(el).children().eq(-1).is('.dropdown-menu')) {
    $(el).find('.caret').hide();
  }
});

j0hnik · #3 (**permalink**) 20.09.2017, 21:50

css

.page-link > i{
	display: none;
}

js

$('li').has("ul.dropdown-menu").find('i').show();

j0hnik · #4 (**permalink**) 20.09.2017, 21:56

или так

$('.page-link>i').hide();
$('li').has("ul.dropdown-menu").find('.page-link>i').show();

рони · #5 (**permalink**) 20.09.2017, 22:18

или так

<!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>

Форум

Справочник

Discord чат

Курсы javascript