如何使下拉箭头(插入符号图标引导)更改单击

How to Make Dropdown arrow(caret icon bootstrap) change On Click?

本文关键字：单击 图标 符号 何使下 插入      更新时间：2023-09-26

如何改变插入符号图标在引导导航药丸下拉?

我不知道如何使用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>

真正的说glyphicon和font-awesome出版后。没有人使用插入符号。你是不是在看这个CaretLiveFiddle ....或者你可以尝试使用导航药丸collapse 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>

$(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类。你应该把它改成

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

，以便使用pv1 id访问您的元素。

另外，正如@mhodges指出的那样，在"hide"中添加插入符号，使其变为down。否则，当它返回到上时，它将变成一个上插入符号，并且永远不会返回到下。

相关文章：