jquery - 响应式菜单问题

Question

您好，我有一个响应式菜单系统，效果很好，但现在我想以不同的方式更改 URL 位置，请先看看我的下拉菜单。

http://jsfiddle.net/Et2HB/

实际上我需要给 Main Menu 1、Main Menu2 和 Main menu 3 来分隔链接，比如一个用于 www.example1.com，一个用于 www.example2.com.. 虽然我只想要右上方的下拉功能在 jsfiddle 示例中找不到的向下箭头(nav_sprite.png)。你可以在下面的类中看到

ul#menu li.hasChildren a > span {
  background: url(../images/nav_sprite.png);
  background-position: right 0px !important;
  background-repeat: no-repeat;
  background-size: 30px auto;
}

我尝试添加另一个如下所示的 anchor 标记..并将该标记赋予 float:left 并尝试将宽度 55px 添加到第二个 anchor 标记，该标记用于通过给定的 float:right 下拉和右侧。但这一切都像 hell 一样崩溃了......

<li><a href="http://www.example.com">Main Menu 1</a><a href="#" tabindex="1" accesskey="h">&nbsp;</a>
<ul>
....

你有解决这个问题的想法吗？

谢谢保罗

Answer 1

希望我理解正确。看看我的 jsFiddle:

Fiddddle

诀窍是给"li"-Element 一个position: relative 属性。 然后你可以自由地绝对定位你的下拉按钮元素:

CSS:

ul#menu li a.dropdownBtn {
    background-color: red;
    position: absolute;
    width: 30px;
    right: 0;
    top: 0;
}

HTML:

<ul id="menu" class="overthrow">
    <li><a href="#" tabindex="1" accesskey="h">Main Menu 1</a>
        <a class="dropdownBtn">v</a>
        <!-- etc etc -->
    </li>
</ul>

JS:

// change:
$('ul#menu li.hasChildren a').on('click', function() {
// to:
$('ul#menu li.hasChildren a.dropdownBtn').on('click', function() {

// and change:
if($(this).attr('class')=="hasChildrenActive"){
// to
if($(this).hasClass("hasChildrenActive")){

唯一剩下的就是调整您的 js 代码，使其使用 a.dropdownBtn 而不是其他链接标签。