ドロップダウン矢印（キャレットアイコンのブートストラップ）をクリックするとどうなりますか？

-1

ブートストラップナビの丸薬のドロップダウンでキャレットアイコンを変更するには？ドロップダウン矢印（キャレットアイコンのブートストラップ）をクリックするとどうなりますか？

私はhide.bs.dropdown

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <style> 
 
    .caret-container { 
 
     float: right; 
 
    } 
 
    .caret.caret-up { 
 
     border-top-width: 0; 
 
     border-bottom: 4px solid; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <ul class="nav nav-pills nav-stacked" id="stacked-menu"> 
 
    <a href="" class="list-group-item">Quality</a> 
 
    <a href="zertifikate.html" class="list-group-item active">Cert</a> 
 
    <ul class="nav nav-pills nav-stacked collapse in" id="p1"> 
 
     <li data-toggle="collapse" data-parent="#p1" href="#pv1"> 
 
     <a class="nav-container list-group-item">Leist<div class="caret-container"><span class="caret caret-up"></span></div></a> 
 
     </li> 
 
     <ul class="nav nav-pills nav-stacked collapse out" id="pv1"> 
 
     <li><a href="" class="list-group-item">sub1111</a></li> 
 
     <li><a href="" class="list-group-item">sub2222</a></li> 
 
     </ul> 
 
    </ul> 
 
    <a href="" class="list-group-item">Fdsafdsfs</a> 
 
    </ul> 
 
    <script> 
 
    $(document).ready(function(){ 
 
     $(".pv1").on("hide.bs.dropdown", function(){ 
 
     $(".pv1").html('<span class="caret"></span>'); 
 
    }); 
 
     $(".collapse").on("show.bs.dropdown", function(){ 
 
     $(".btn").html('<span class="caret caret-up"></span>'); 
 
     }); 
 
    }); 
 
    </script> 
 

 

 
    
 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

出典

2016-09-28 foobarbaz

またはdownvotedなぜあなたはあなたのイベントハンドラ – mhodges

でDOMに追加したときに、それを代わりにキャレットアップのキャレットダウンのクラスを与えますか？ – foobarbaz

Glyphiconsとfont-awesomeの後に本当に言っています。誰もキャレットを使用しません。だから、あなたはこのようなものを探していますCaretLiveFiddle ....あるいは、あなたはGHypiconsをnav-pills collapsingで試すことができますGlyphiconsUseForCollapse。あなたは何か質問がある場合は、コメントで私に尋ねることができます。ありがとうございました。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
    .caret-container { 
 
     float: right; 
 
    } 
 
    .caret-up{ 
 
     border-top-width: 0; 
 
     border-bottom: 4px solid; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <ul class="nav nav-pills nav-stacked" id="stacked-menu"> 
 
    
 

 
<a href="" class="list-group-item">Quality</a> 
 
    <a href="zertifikate.html" class="list-group-item active">Cert</a> 
 
    <ul class="nav nav-pills nav-stacked collapse in" id="p1"> 
 
     <li data-toggle="collapse" data-parent="#p1" href="#pv1"> 
 
     <a class="nav-container list-group-item">Leist<div class="caret-container"><span class="caret caret-down"></span></div></a> 
 
     </li> 
 
     <ul class="nav nav-pills nav-stacked collapse out" id="pv1"> 
 
     <li><a href="" class="list-group-item">sub1111</a></li> 
 
     <li><a href="" class="list-group-item">sub2222</a></li> 
 
     </ul> 
 
    </ul> 
 
    <a href="" class="list-group-item">Fdsafdsfs</a> 
 
    </ul> 
 
    <script> 
 
    $('.collapse').on('shown.bs.collapse', function() { 
 
    $(this).parent().find(".caret-down").removeClass("caret-down").addClass("caret-up"); 
 
}).on('hidden.bs.collapse', function() { 
 
    $(this).parent().find(".caret-up").removeClass("caret-up").addClass("caret-down"); 
 
}); 
 

 
    </script> 
 

 
</body> 
 
</html>

出典

2016-09-28 20:08:49

は完璧に働く、ありがとう – foobarbaz

ようこそ。 [http://getbootstrap.com/components/#dropdowns]あなたのコードでいくつか誤りがありました。リンクをたどります。あなたは間違った部分を見つけるでしょう。ハッピーコーディング。 :) –

$(document).ready(function(){ 
    $(".pv1").on("hide.bs.dropdown", function(){ 
    $(".pv1").html('<span class="caret"></span>'); 
}); 
    $(".collapse").on("show.bs.dropdown", function(){ 
    $(".btn").html('<span class="caret caret-up"></span>'); 
    }); 
});

使いのブラウザではJavaScriptが参照しているPV1クラスを使用する方法がわかりません。 pv1 idで要素にアクセスするには、

$(document).ready(function(){ 
    $("#pv1").on("hide.bs.dropdown", function(){ 
    $("#pv1").html('<span class="caret caret-down"></span>'); 
}); 
    $(".collapse").on("show.bs.dropdown", function(){ 
    $(".btn").html('<span class="caret caret-up"></span>'); 
    }); 
});

に変更する必要があります。

また、@mhodgesが指摘しているように、「隠す」にキャレットを追加すると、下に移動します。さもなければ、それがバックアップになるとき、それは上のキャレットに変わり、決して元に戻らない。

出典

2016-09-28 18:54:03

コードを変更しましたが、キャレットは反転しません。[このコードニッペッ]（https://codepen.io/anon/pen/wzZQOR?editors=1111）にチェックしてください – foobarbaz

私は@ mostafa-baezid 。私はこれが働くことがわかりました：$（document）.ready（function（）{ $（ "＃p1"）on（ "click"、function（）{ $（ "＃p1。 toggleClass（ 'glyphicon-triangle-top glyphicon-triangle-bottom'）; }）; }）; –

ありがとう、それは今働いた:-) – foobarbaz

ドロップダウン矢印（キャレットアイコンのブートストラップ）をクリックするとどうなりますか？

答えて

関連する問題