logo标签列表

切换Bootstrap下拉菜单时旋转小箭头并防止在内部点击后关闭

javascriptjqueryhtmlcss
3
我有以下片段，它在单击dropdown-toggle时旋转.caret。 这将旋转.caret而不出问题，但它也会旋转页面上的所有其他.caret。 我需要为页面上每个单独的.caret和.dropdown-toggle编写一个单击函数，还是可以有一个独立工作的函数？
另外，是否有一种方法可以在下拉菜单中的项目被单击时停止dropdown-menu关闭？ 

$(document).ready(function() {
  $(".dropdown-toggle").click(function() {
    $(".caret").toggleClass('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>

有没有办法可以阻止下拉菜单在其中的项目被点击时关闭？如果用户点击 a 元素，您希望下拉菜单保持打开状态吗？ - sol
@ovokuro，没错，谢谢。 - CBreeze
5个回答
9

在Bootstrap +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 -->

4

请看下面的内容，它是可行的

编辑：

我更新了我的答案，采用了更好的方法来覆盖所有的情况，并且针对你在原始帖子中关于防止菜单关闭的最后一个问题，有两种方法可以解决

  1. 将 click 事件绑定到 dropdown 上，并在已经打开时阻止传播。

  2. 您需要删除 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>

谢谢。当用户点击<a>时，它是否可以旋转？ - CBreeze
它正在<a>标签上旋转，你在说哪个<a>标签？目前它适用于带有dropdown-toggle类的锚点标签中的插入符号和文本。 - Muhammad Omer Aslam
当我点击列表项之一时，它不会再次旋转插入符号。 - CBreeze
嗯，它差不多了，只是另一个下拉菜单。当我从它们那里点击离开时，.carets没有旋转。因此，如果我单击底部下拉菜单并且顶部下拉菜单已打开，则希望顶部关闭并旋转插入符号。 - CBreeze
@CBreeze 抱歉回复晚了，但我更新了我的答案，提出了一个更好的方法，可以覆盖所有方面，希望这可以解决你的所有问题。 - Muhammad Omer Aslam
AND，现在你也可以将它选为正确答案，我值得得到它 :P。 - Muhammad Omer Aslam
2
在Bootstrap 3中，每当您单击下拉列表并打开它时，class =“open”会出现，因此我尝试了这段代码，它可以正常工作！
.open>a>.caret{
  transform: rotate(180deg);
  transition: all ease-out 0.4s;
 }
0

试试这个

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


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

0

试试这个。

$(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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接