Есть ли способ CSS для добавления стрелки, если ul имеет дочерний элемент ul?

Ответ 1

Это прекрасно выполнимо в CSS -

Ваша структура такова:

 <ul class="menu">
      <li>
           <a href="#">Has arrow</a>
           <ul><li><a href="#"></a></li></ul>
      </li>
      <li>
           <a href="#">Has no arrow</a>
      </li>
  </ul>

Ваш CSS будет таким:

   //this adds an arrow to every link
  .menu li > a:after { content: '>'; } 

  // this removes the arrow when the link is the only child
  .menu li > a:only-child:after { content: ''; }   

Сделав это на шаг дальше, если вы хотите иметь раскрывающееся меню, где есть стрелка вниз на элементах верхнего уровня, а затем стрелки вправо для подменю, ваш CSS будет выглядеть следующим образом:

   // set up the right arrows first
   .menu li > a:after { content: '>'; }

   //set up the downward arrow for top level items
   .menu > li > a:after {content: 'v'; }

   //clear the content if a is only child
   .menu li > a:only-child:after {content: ''; }

Вот его действие в действии - http://jsfiddle.net/w9xnv/2/

Ответ 2

Вы могли сделать это:

ul.children:before {
    content:  "▼";
}

здесь пример

Этот не поддерживает во всех браузерах, вот список поддержки

ИЗМЕНИТЬ

Только что понял, что мой пример выше будет ошибочным, стрелка окажется в неправильном положении. Тем не менее - если это проспект, вы хотели бы использовать возможность правильного выравнивания стрелки.

Ответ 3

Я думаю, что лучший способ - добавить класс (или тот диапазон, который вы используете) к тем li на сервере.

Другое решение, но, вероятно, не простое и не чистое, - это добавить стрелку ко всем ul и сделать их видимыми (используя css) в ul.children. Затем вы можете попытаться расположить стрелку впереди или позади родительского li. Будет ли это работать, будет зависеть от дизайна.

Ответ 4

В интересах сохранения простоты, вот решение, которое мне нравится использовать:

• Поместите теги вокруг имени элемента, выступающего в качестве раскрывающегося меню.

  <div class="menu">
      <ul>
          <li><a href="#"><span>Page with Subpages</span></a>
              <ul class="children">
                  <li><a href="#"><span>Page with another subpage</span></a>
                      <ul class="children">
                          <li><a href="#">subsubpage</a></li>
                      </ul>
                  </li>
              </ul>
          </li>
      </ul>
  </div>
  

• Добавьте стрелку, используя CSS:

  #menu span:after /* DropDown Arrow */
  {
     border: 0.313em solid transparent; /* 5 pixels wide */
     border-bottom: none;  /* helps the drop-down arrow stay in the vertical centre of the parent */
     border-top-color: #cfcfcf;   /* colour of the drop-down arrow */
     content: ''; /* content of the arrow, you want to keep this empty */
     vertical-align: middle;
     display: inline-block;
     position: relative;
     right: -0.313em; /* 5 pixels right of the menu text*/
  }
  

Надеюсь, это сработает для вас! Я считаю, что это самый простой метод, с которым я столкнулся!

Ответ 5

Для будущих читателей! Я тоже задавался вопросом, а потом понял это сам.

мы не можем проверить, имеет ли элемент дочерние элементы, но мы можем проверить, не пуст ли он

li:not(:emtpy):after {
    content: "V";
    color: black;
    position: relative;
    left: 120%;
    /* Well those styles are not best but you get the idea */
}

Ответ 6

Старый вопрос, но вот как я это сделаю:

.menu li > a:not(:only-child):after { content: '▼'; }

Вы также можете сделать его более приятным:

.menu li > a:not(:only-child):after { 
    content: '\00a0\00a0▼'; /* add a little spacing so it not right next to the text */
    font-size: 0.8rem; /* adjust font size so it looks better */
    vertical-align: middle; /* vertical align to middle */
}

Ответ 7

Нет родительского селектора CSS.

Но вот более короткий код jquery:

$('.children').prev('li').append('<span class="dwn">▼</span>');

Ваш вопрос похож на этот:

Сложный селектор CSS для родителя активного дочернего элемента

Ответ 8

Для вертикального меню: это js, Works on all = nav.vertical li

$("nav.vertical li:has(ul)").find("a:first").append('<img src="" alt="" class="">');

<nav>
   <ul>
     <li><a href="">Page</a>
         <ul class="children">
           <li><a href="">Post</a></li>
         </ul>
     </li>
   </ul>
</nav>

Ответ 9

Например

$(function() {
$('.menu a').each(function() {
    if ( $(this).parent('li').children('ul').size() > 0 ) {
        $(this).append('<span></span>');
    }           
  });
});

и CSS

.menu li a span {
display: -moz-inline-stack;
display: inline-block;  
zoom: 1;
*display: inline;
vertical-align: middle;
background: url(arrow.png) 0 0 no-repeat;
width: 5px;
height: 3px;
margin-left: 5px;

Ответ 10

Это только уточнение ответа rotaercz. С помощью CSS-трюки

#cssmenu li > a:not(:only-child)::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    float: right;
}