如果ul有一個ul孩子，是否有CSS方法來添加箭頭？

Question

我的導航結構是這樣的：

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

我希望所有<li>的有一子導航孩子有加一點點的向下箭頭，以便用戶知道這個頁面有子頁面。

如果<li>的子女是ul.children，是否可以在純css中檢測到？在我上面的例子中，「帶有子頁面的頁面」應該應用向下箭頭，並且「帶有另一個子頁面的頁面」也是如此。

現在我使用jQuery來解決這個問題：

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

有一個簡單的純CSS的方法來做到這一點？

謝謝。

Answer 1

我認爲最好的方法是在服務器上添加一個類（或者你正在使用的那個類）到這些lis。

另一個解決方案，但可能不容易，不乾淨，是將箭頭添加到所有ul s，並只在ul.children中使它們可見（使用css）。然後，您可以嘗試將箭頭放在父李的前面或後面。這是否可行取決於設計。

Answer 2

您可以做到這一點：

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

這裏an example

這沒有在所有瀏覽器支持，here is a list of support

編輯

剛剛意識到我的上面的例子會有缺陷，箭頭將處於錯誤的位置。仍然 - 如果這是你想要追求的一種途徑，那麼可以正確對齊箭頭。

Answer 3

沒有CSS'父選擇器'。

但這裏是一個較短的jQuery代碼：

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

你的問題是類似這樣的：

Complex CSS selector for parent of active child

Answer 4

對於垂直菜單： 這個js，適用於所有=資產淨值。垂直立

$("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> 

Answer 5

這是完全可行的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: ''; } 

這裏是它在行動的jsfiddle - http://jsfiddle.net/w9xnv/2/

Answer 6

例如

$(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; 

Answer 7

在保持簡單的利益，這裏是我喜歡使用的解決方案：

1. 在作爲下拉菜單的項目名稱周圍放置標籤。

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

2. 使用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*/ 
   } 
   

希望這對你的作品！我相信這是我遇到的最簡單的方法！

Answer 8

面向未來的讀者！我在想，太，然後琢磨出來我自己

我們不能檢查，如果元素有孩子，但我們可以檢查它是否是空的

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

Answer 9

老問題，但是這是我會怎麼做它：

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

您也可以使它看起來像這樣更好：

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

Answer 10

這僅僅是一個012細化的答案。從CSS Tricks

#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; 
}