Question

我有以下代码段在.caret点击时轮换dropdown-toggle。这样可以毫无问题地旋转.caret，但它也会旋转页面上的所有其他.caret。我是否需要为页面上的每个.caret和.dropdown-toggle编写一个点击功能，或者我可以使用一个独立工作的功能吗？

另外，有没有一种方法可以在dropdown-menu关闭时单击其中的项目并将其停止？

＆＃13;

$(document).ready(function() {
  $(".dropdown-toggle").click(function() {
    $(".caret").toggleClass('rotate-180');
  });
});

＆＃13;

ul {
  list-style: none;
}

.caret {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.rotate-180 {
  transform: rotate(-180deg);
}

＆＃13;

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <ul>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
  </ul>
</body>

＆＃13;

Answer 1

见下文有效

修改：

我更新了我的答案以更好的方法来涵盖所有场景，并且您在OP中询问的关于阻止菜单关闭的最后一件事，可以通过两种方式完成

将click事件绑定到dropdown并阻止传播（如果已经打开）。

您必须删除data-toggle="dropdown"属性并自行打开和关闭菜单。但我认为这需要比代码片段中使用的代码行更多的代码行。

$(document).ready(function() { $('.dropdown').on('hidden.bs.dropdown', function(e) { $(this).find('.caret').toggleClass('rotate-180'); }); $('.dropdown').on('shown.bs.dropdown', function(e) { $(this).find('.caret').toggleClass('rotate-180'); }); //this is to avoid the menu from closing if clicked inside the menu $('body').on("click", ".dropdown-menu", function(e) { $(this).parent().is(".open") && e.stopPropagation(); }); });

ul { list-style: none; } .caret { -moz-transition: transform 1s; -webkit-transition: transform 1s; transition: transform 1s; } .rotate-180 { transform: rotate(-180deg); }

<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <ul> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> </ul> </body>

Answer 2

在引导程序3中，只要在打开下拉列表时单击它，就会出现class =“ open”，因此我尝试了此代码，效果很好！

.open>a>.caret{
  transform: rotate(180deg);
  transition: all ease-out 0.4s;
 }

Answer 3

试试这个。

$(document).ready(function () {
    $( ".dropdown-toggle" ).click( function(){   
      $(this).children(".caret").toggleClass('rotate-180');     
    });  
});
$(document).on("click", function(event){
  var $trigger = $(".caret");
  if($trigger !== event.target && !$trigger.has(event.target).length){
     $(".caret").removeClass('rotate-180');  
  }            
});

ul {
  list-style: none;
}

.caret {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.rotate-180 {
  transform: rotate(-180deg);
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <ul>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
  </ul>
</body>

Answer 4

试试这个

    $(document).ready(function () { 
   $( ".dropdown-toggle" ).click( function() {
       $(this).children(".caret").toggleClass('rotate-180');
     });
    $( ".dropdown-menu" ).click( function() {
       $(this).siblings().children(".caret").toggleClass('rotate-180');
     });
   $(document).click(function(e){
      if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
         $(".caret").removeClass('rotate-180');
      }
    })
 });

＆＃13;

$(document).ready(function () { 
   $( ".dropdown-toggle" ).click( function() {
	   $(this).children(".caret").toggleClass('rotate-180');
	 });
    $( ".dropdown-menu" ).click( function() {
	   $(this).siblings().children(".caret").toggleClass('rotate-180');
	 });
   $(document).click(function(e){
      if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
         $(".caret").removeClass('rotate-180');
      }
    })
 });

＆＃13;

ul {
  list-style: none;
}

.caret {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.rotate-180 {
  transform: rotate(-180deg);
}

＆＃13;

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <ul>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Directories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
  </ul>
</body>

＆＃13;

Answer 5

在引导程序+ v4中只需添加样式：

.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(180deg); 
}
/*for animation*/ 
.dropdown-toggle:after { 
transition: 0.7s; 
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>



            <li class="nav-item dropdown" >
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdowns" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdowns">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
          </li>



    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html><!-- roiket -->

在切换时旋转Bootstrap下拉插入符号，如果在内部单击则阻止关闭

5 个答案: