Jquery 响应菜单问题

Jquery 响应菜单问题,jquery,css,html,responsive-design,Jquery,Css,Html,Responsive Design,嗨,我有一个反应灵敏的菜单系统,工作得很好,但现在我想以不同的方式改变URL的位置,首先看看我的下拉菜单这里 实际上,我需要给主菜单1、主菜单2和主菜单3单独的链接,比如一个用于www.example1.com,一个用于www.example2.com。。虽然我只想要右下箭头(nav_sprite.png)上方的下拉函数,但在JSFIDLE示例中找不到它。你可以在下面的课堂上看到这一点 ul#menu li.hasChildren a > span { background: url

嗨,我有一个反应灵敏的菜单系统,工作得很好,但现在我想以不同的方式改变URL的位置,首先看看我的下拉菜单这里

实际上,我需要给主菜单1、主菜单2和主菜单3单独的链接,比如一个用于www.example1.com,一个用于www.example2.com。。虽然我只想要右下箭头(nav_sprite.png)上方的下拉函数,但在JSFIDLE示例中找不到它。你可以在下面的课堂上看到这一点

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;
}
我尝试添加另一个锚定标记,如下..并将该标记设为float:left,并尝试将宽度55px添加到第二个锚定标记上,该锚定标记用于下拉,并通过给定的float:right将宽度55px添加到右侧。但这一切都像地狱一样崩溃

<li><a href="http://www.example.com">Main Menu 1</a><a href="#" tabindex="1" accesskey="h">&nbsp;</a>
<ul>
....
    • ....
  • 你有办法解决这个问题吗


    谢谢保罗,我希望我能正确地理解你。看看我的JSFIDLE:

    诀窍是给“li”元素一个位置:relative属性。 然后,您可以自由放置下拉按钮元素:

    CSS:

    ul#menu li a.dropdownBtn {
        background-color: red;
        position: absolute;
        width: 30px;
        right: 0;
        top: 0;
    }
    
    <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>
    
    // 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")){
    
    HTML:

    ul#menu li a.dropdownBtn {
        background-color: red;
        position: absolute;
        width: 30px;
        right: 0;
        top: 0;
    }
    
    <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>
    
    // 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而不是另一个link标签。

    谢谢你的回复,但我仍然可以看到整个
  • 标签都有下拉功能,如何给文本“Main Menu 1”提供一个链接,然后我想要一个没有url的间隙,我的意思是下拉函数,直到右边的“v”.正如我所写的:剩下的是调整JS。请查看更新的小提琴链接。我想这还不是你想要的100%。但是这个平台是用来回答问题的,而不是要求编码的解决方案。Nirazul,如果你觉得我的回答像是“为我做”类型,我很抱歉。。事实上我整天都在玩这个。。。感谢您的快速回复,再次表示感谢。。