Javascript 引导导航栏切换不适用于移动设备

我有个问题

预期的行为是这样的

1当我单击任何父类别文本（例如计算机）时，它将引导我进入类别页面。 2当我单击类别的向下箭头时，它应该展开并显示子类别项

所有这些都可以正常工作，但现在我想将向下箭头向右移动，将style=“float:right”应用于元素。但是现在我的预期行为2被破坏了。它将我引导到相应的页面，而不是扩展子类别项

---

我在这里做错了什么？

您可以让li中的a标记向左浮动，然后它就可以工作了

.navbar-default .navbar-nav>li>a {
    float:left;
}

请将css更改为与您的项目相关

要使向下箭头的单击生效：

关闭当前可见的所有其他下拉列表

从所有其他li中删除“open”类

从与单击相对应的当前li切换打开类

切换与单击对应的下拉列表的可见性

在悬停代码中，我们还切换li上的open类。如果用户将鼠标悬停在向下箭头上，那么我们将向相应的li添加Class open。反之亦然

---

请参阅：

通过将字体图标浮动到右侧，而不是实际的a标记，我使其工作。唯一的问题是我无法摆脱底部的填充物。也许你想把它放在那里

$（文档）.ready（函数（）{
$（'.navbar a.dropdown-toggle'）。打开（'click'，函数（e）{
var elmnt=$（this.parent（）.parent（）；
如果（！elmnt.hasClass（'nav'））{
var li=$（this.parent（）；
var heightParent=parseInt（elmnt.css（'height'）.replace（'px'，''）/2；
var widthParent=parseInt（elmnt.css（'width'）。replace（'px'，''）-10；
如果（！li.hasClass（'open'））li.addClass（'open'））
else li.removeClass（“打开”）；
$（this.next（）.css（'top'，heightParent+'px'）；
$（this.next（）.css（'left'，widthParent+'px'）；
返回false；
}
});
});
函数setMousehOverdown（）{
如果（$（窗口）.innerWidth（）>767）{
$（'ul.nav li'）。悬停（函数（）{
$（this）.find（'>.dropdown menu'）.stop（true，true）.delay（200）.fadeIn（500）；
}，函数（）{
$（this）.find（'>.dropdown menu'）.stop（true，true）.delay（200）.fadeOut（500）；
});
}
}
$（窗口）。加载（函数（）{
setmousehoverdoppown（）；
});
$（文档）.ready（函数（）{
setmousehoverdoppown（）；
});
$（窗口）。调整大小（函数（）{
setmousehoverdoppown（）；
});
.fa角度向下{
浮动：对；
利润上限：-50px；
}
a、 下拉开关{
高度：10px；
填充底部：0px！重要；
线高：1！重要；
}

切换导航














































你的提琴实际工作了，你在代码片段中的引导JS之后加入了jQuery。@PrasanthTP很乐意帮忙：）谢谢Rachel。我能修好它。请重新查看：。这一次，向下箭头图标位于标签的右侧。如果将鼠标悬停在标签上，它将使标签背景变暗并打开下拉列表。也可以单击箭头切换下拉列表的可见性。
.navbar-default .navbar-nav>li>a {
    float:left;
}