グリフコン表示をしようとしています。それはサイド・ナビゲーションの一部であり、矢印の頭が回転します...かなり標準的なベアボーンちょっと物事。ページへブートストラップグリフィコンは表示されませんが、フィドルで表示されます
リンク: http://www.nickysfolders.com/nicky-s-communicator-english.aspx?SessionThemeID=34#
glyphiconはサイドナビゲーションバーの「ニッキーのフォルダ」トップレベルのタイトルにする必要があります。
これは私がドロップダウン機能と矢印アニメーションを得るために適応した本当にクールなスニペットです...かなりクールです。 awesome, very very lightweight, portable solution to side nav dropdowns
私はすでに試みているもの:
私は、HTML内の周りのスパンを移動しようとしていると、それは
を表示しません、私はそれに色を入れている(デベロッパーツールのすべての)
私が見上げていますcommon problems glyphiconsが表示されない(最も一般的です...はい、私はすでにmax cdnから3.2をロードしています)。
私はそれはあなたがフィドル作業中のグリフのアイコンを見ることができるように、私は...
を作っています単純な間違い(残念ながら、JSはまだない)である賭ける:
https://jsfiddle.net/vaughnick/f4gkxx4n/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
[data-toggle="collapse"][aria-expanded="true"] > .js-rotate-if-collapsed {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<div id="accordion" style="cursor: pointer" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
<span class="glyphicon glyphicon-triangle-right js-rotate-if-collapsed"></span>
<a href="#">Nicky's Folders<span class="small-reg">®</span></a>
<hr class="half-rule" />
<ul id="collapseExample" class="collapse">
<li style="cursor: pointer" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
<span class="glyphicon glyphicon-triangle-right js-rotate-if-collapsed"></span>
<a href="#">2-Pockets</a>
<ul id="collapseExample" class="collapse">
<li><a href="#">Nicky's<span class="small-reg">®</span>Version II<small>(NF VER II)</small></a></li>
<li><a href="#">Nicky's<span class="small-reg">®</span>Communicator</a>
<ul>
<li><a href="#">English</a></li>
<li><a href="#" style="overflow: wrap;">Spanish Multilanguage</a></li>
</ul>
</li>
<li><a href="#">Nicky's<span class="small-reg">®</span>Class Work</a></li>
<li><a href="#">Nicky's<span class="small-reg">®</span>Homework</a></li>
<li><a href="#">Nicky's<span class="small-reg">®</span>CPA</a>
<ul>
<li><a href="#">Version 10</a></li>
<li><a href="#">Version 11</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
アドバイスありがとうございました! :)
を参照してください。あなたのコードで問題を見つけるのは簡単でしょう。 – Super
これは私の適応した謎です:https://jsfiddle.net/ghzwwz49/ – imnickvaughn
そのフィドルで働いて – imnickvaughn