文章/答案/技术大牛

发布

jquery 下拉菜单箭头旋转

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。下拉菜单箭头旋转是一种常见的 UI 动画效果，用于指示下拉菜单的展开和收起状态。

类型

下拉菜单箭头旋转通常分为两种类型：

CSS3 动画：利用 CSS3 的 transform 属性和 transition 属性实现平滑的旋转效果。
JavaScript/jQuery 动画：通过 jQuery 的 animate 方法实现旋转效果。

应用场景

下拉菜单箭头旋转广泛应用于各种需要用户交互的网站和应用中，例如导航栏、设置菜单、筛选器等。

示例代码

CSS3 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Arrow Rotation</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .dropdown-arrow {
            border: solid black;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(45deg);
            transition: transform 0.3s;
        }
        .dropdown:hover .dropdown-arrow {
            transform: rotate(-135deg);
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button>Dropdown</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
        <span class="dropdown-arrow"></span>
    </div>
</body>
</html>

jQuery 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Arrow Rotation</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-arrow {
            border: solid black;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transition: transform 0.3s;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="dropdown">
        <button>Dropdown</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
        <span class="dropdown-arrow"></span>
    </div>

    <script>
        $(document).ready(function() {
            $('.dropdown').hover(
                function() {
                    $(this).find('.dropdown-content').show();
                    $(this).find('.dropdown-arrow').css('transform', 'rotate(-135deg)');
                },
                function() {
                    $(this).find('.dropdown-content').hide();
                    $(this).find('.dropdown-arrow').css('transform', 'rotate(45deg)');
                }
            );
        });
    </script>
</body>
</html>

常见问题及解决方法

箭头旋转不平滑：
- 原因：可能是 CSS 动画或 jQuery 动画的过渡效果设置不当。
- 解决方法：确保 transition 属性或 animate 方法的时间设置合理，并且没有其他 CSS 样式干扰。

箭头旋转方向错误：
- 原因：可能是旋转角度设置错误。
- 解决方法：检查 transform 属性或 animate 方法中的旋转角度，确保它们符合预期。
箭头旋转动画不触发：
- 原因：可能是事件绑定错误或选择器不正确。
- 解决方法：确保事件绑定正确，并且选择器能够准确选中目标元素。

通过以上示例代码和解决方法，你应该能够实现一个平滑的下拉菜单箭头旋转效果。

页面内容是否对你有帮助？

有帮助

没帮助

更改下拉图标引导程序

、、

我想尝试更改引导下拉菜单按钮上的默认箭头吗？这有可能吗？我希望它能像android的旋转图标一样：否则，只是来自FontAwesome之类的东西。我不想使用jQuery /我必须使用引导拖放：我发现了许多与我所问的问题类似的问题，但这些问题与jQuery有着更密切的联系--但如果已经存在解决方案，可以自由地向我指出。

浏览 2提问于2015-04-02得票数 1

回答已采纳

1回答

我正在使用SCSS和引导带4导航栏在我的网页上，某些.nav-item元素是切换下拉菜单。当悬停在.dropdown-toggle元素上时，我希望在包含在.dropdown-toggle::after中的按钮的箭头上应用transform: rotate(180deg)。在dropdown-toggle:hover::after上设置转换样式时，箭头旋转得很好，但是当鼠标移动到下拉菜单本身时，箭头就会旋转回原来的位置。我想保持箭头旋转

浏览 2提问于2019-10-23得票数 0

回答已采纳

2回答

Android下拉“命令”菜单

、

我想使用下拉菜单让用户选择一个操作(在本例中，他们从列表中选择一些项目，并使用该菜单选择“删除”、“移动”等)。在点击之前，我希望下拉菜单看起来像箭头(没有显示“当前选定的”数据的相邻空间)。是否有比旋转器更适合于此的组件，还是应该通过调整旋转器来实现这些目标？

浏览 3提问于2012-04-27得票数 0

回答已采纳

3回答

选择其他项时移除切换类

、、

在我的移动站点上，我有一个垂直下拉菜单(如手风琴)，其中每个父项目都有一个向下指向的箭头来表示下拉菜单。当用户单击父项时，箭头会旋转，当您再次单击它以关闭下拉时，箭头会旋转回原来的状态。但是，如果您不单击下拉列表来关闭它，而只需单击另一个父项，下拉列表就会关闭，但是箭头将停留在旋转的位置。#arrow-application').toggleClass("rotate"); $(this)

浏览 7提问于2015-09-24得票数 1

回答已采纳

1回答

带有文本和图像的jquery旋转木马自动滚动

、、

我使用的是jquery，我的图像在这里自动旋转( )，所以我遇到的问题是左边的内容不是自动旋转的图像，箭头选择也不是。只有当我单击左边的内容，然后右边的图像和箭头一起适当地移动时，它才能工作。有人能提供支持，以便我可以得到文本和箭头的“自动”旋转与图像？下面的代码只会旋转图像，没有别的. jQuery("#features"

浏览 3提问于2010-06-10得票数 0

回答已采纳

3回答

jQuery动画图像旋转

、、

我有一个带有子菜单的导航条和一个可单击的箭头，该箭头将使子菜单向下(已经使用jQuery slideToggle())，并且我正在尝试使用jQueryRotate.js来慢慢地旋转箭头和菜单。向上指向菜单的箭头被收回，箭头向下指向菜单显示。我尝试过使用jQuery animate()，但没有成功。第一个也是最明显的问题是，当菜单被收回时，箭头不会旋转到指向上。

浏览 10提问于2013-11-06得票数 2

回答已采纳

4回答

关闭Android微调器中的下拉列表

、、、

在Android中打开和关闭微调器时，我需要设置箭头图标的动画。我可以在打开微调器时旋转箭头:我只是在Spinner上放了一个setOnTouchListener。当下拉菜单关闭或隐藏时，问题就来了，因为我不知道如何在该操作上设置侦听器或类似的东西。在此之前非常感谢。

浏览 0提问于2013-09-09得票数 2

1回答

jQuery滑动切换旋转动画

、、

我的jQuery函数有问题。我想有一个滑动切换，这将动画的箭头旋转旁边的滑动切换文本。现在，箭头旋转动画只在第一次蚂蚁时播放，它也没有动画旋转回来(当滑动切换关闭时)。当列表关闭时，该箭头不会向后旋转$(1.2.html).ready(function() { $("ul").slideTogglep {

浏览 18提问于2019-08-15得票数 0

1回答

下拉菜单切换旋转箭头

、、

我有两个下拉菜单是隐藏的。一旦用户单击其中一个，就会显示它们。当一个下拉菜单打开时，它会关闭另一个下拉菜单。这工作到目前为止还不错。我在每个菜单中添加了一个SVG插入符，当用户单击一个菜单时，它会被旋转(90deg)。当另一个菜单打开时，我如何将它旋转回最初的位置(-360 when )。应该就在每个下拉菜单旁边。现场演示：

浏览 1提问于2020-10-07得票数 0

回答已采纳

1回答

操作复选框，使CSS在未选中时旋转。

、、、、

我用checkbox做了一个移动导航，有一个下拉菜单。当检查checkbox (导航是‘打开的’)时，它旋转180度，所以箭头朝上。当我点击它的时候，我想要有同样的效果。unchecked*/ transition: all ease-in-out .3s1.默认状态的箭头：Arrow在检查时朝上：现在只有CSS，没有JS或jQuery。

浏览 4提问于2020-07-03得票数 1

回答已采纳

1回答

修改输入type=number，使其两边都有箭头

、、、、

我想要更改输入type=number，使其两边都有箭头。所以不是把旋转器放在右手边，我希望把左箭头放在左边，把右箭头放在右边。这就是我想要的输入的样子：

浏览 3提问于2016-05-17得票数 0

1回答

IE选择控件下拉箭头图像

、

我不确定这是否有意义，但有没有办法告诉你哪个箭头图像将用于IE下拉菜单？我在Chrome或Firefox上从来没有遇到过问题，但在IE中有不同的图像。根据所使用的版本或操作系统，箭头具有不同的图像。如果使用Windows7高级图形模式或其他模式，它将是一个带有样式的箭头按钮，但如果你关闭它或使用传统模式，它看起来就像Chrome和Firefox。

浏览 1提问于2011-07-08得票数 0

0回答

将箭头键设置为全局可访问性

、、

我正在尝试绑定箭头键以用作辅助功能导航侦听器。我发现有几篇文章讨论了如何使用jquery绑定函数，其中最有用的是：。也就是说，我找不到任何方法来创建一组全局的箭头键功能，以允许我的用户在站点范围内使用箭头键。这可以使用jquery实现吗？或者它完全基于在我会使用箭头键的地方使用类，比如下拉菜单？

浏览 7提问于2017-01-04得票数 0

回答已采纳

1回答

用jquery插件定制箭头和点

、、、

如何自定义光滑的旋转木马jquery插件中的下一个箭头和前面的箭头？我试图修改slick.css文件，但得到了奇怪的结果。我想为箭头和点添加自定义图像，并修改滑块和箭头之间的边距。

浏览 3提问于2016-09-01得票数 0

回答已采纳

2回答

如何为内容滑块或内容旋转木马或内容滚动创建箭头导航

、、、

我需要的是点击箭头，它应该平滑地从当前的一组内容移动到下一组内容，就像图像滑块一样，如果点击了前面的箭头，就应该加载以前的内容。

浏览 5提问于2014-11-05得票数 0

回答已采纳

1回答

安卓浏览器上的CSS3动画问题

、、、、

我正在制作一个HTML5应用程序，并使用CSS3变换(css3旋转)使用jQuery ui draggable从箭头的一端旋转箭头。我集成了jQuery UI Touch Punch库(v0.2.2)，可以在Ipad和平板电脑等触摸设备上模拟拖动事件。箭头在除Android平板电脑(4.1)以外的所有平台上都可以平稳旋转。我似乎遇到了一种延迟，它以帧为单位旋转(在设备上旋转我的手指3-4秒后，箭头

浏览 0提问于2012-12-27得票数 2

3回答