最新の Twitter Bootstrap 3 に基づいた、やや複雑なサイドバー メニューを開発していますAccordion。メニューにはアイテム付きのサブメニューを含むアイテムがあり、偶数要素と奇数要素でアイテムの背景色を変えたいと思いました。
ここで私の例を見ることができます: http://jsfiddle.net/dzorz/qZZ3r/
この css パーツを使用して、アコーディオン/パネルの偶数要素と奇数要素に色を付けることができました。
.panel-default:nth-of-type(odd) .panel-heading{
background: #ffffff !important;
}
.panel-default:nth-of-type(even) .panel-heading{
background: #5bc0de !important;
}
そして、すべてが第 1 レベルのアイテムとfirst(odd) item(「Dr. Hans von Rosenheim」)の内部にある第 2 レベルのアイテムでうまく機能しますが、第 1 レベルの内部にある第 2 レベルのアイテムsecond(even) item(「Hans von Rosenheim」) はすべてすべて偶数のアイテムのように青色で表示されます。
ここで私の質問は、この css がサブメニューの最初のケースではうまく機能し、サブメニューの 2 番目のケースでは同じように機能しない理由と、どのように解決できるかということです。
上記のリンク先のjsfiddleで確認して編集できます。
Psコードは非常に長く、css の重要な部分にすぎないため、すべてのコードを貼り付けたわけではありません。jsfiddleですべてのコードをまとめてチェックできます