How to Make Dropdown arrow(caret icon bootstrap) c

2019-06-14 17:01发布

站内问答 / JavaScript
1904 2 6

How to change caret icon on dropdown in bootstrap nav-pills?

I don't know how to use 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>

2条回答
We Are One
2楼-- · 2019-06-14 17:27 
$(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>');
  });
});

Your javascript is referencing pv1 class. You should change it to 

$(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>');
  });
});

in order to access your element with pv1 id.

Also, as @mhodges points out, add a caret-down to the "hide", so that it changes to down. Otherwise, when it goes back up, it will change to an up caret, and never revert back to down.

查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
3楼-- · 2019-06-14 17:38

Truly saying after Glyphicons and font-awesome published. No one use caret. So are you looking something like this one CaretLiveFiddle .... Or you can try Ghypicons with the nav-pills collapsing GlyphiconsUseForCollapse. If you have any question you can ask me in comment. Thank you. 

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)