点击菜单不起作用

Question

点击菜单后会打开，但是其他所有菜单都可以打开，加上所有菜单都可以悬停打开。我尝试了几种目标组合，例如。我是李的，但我还是错了。

我在下面贴了一个小提琴，但由于某种原因，它甚至根本不起作用。

我有一个使用此代码的单一菜单，不知道为什么它会因此而失败。在ul li ul配置中的许多级别？我是否需要定位新的ID？

CSS

.dropmenu,
.dropmenu ul,
.dropmenu li,           

.dropmenu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.dropmenu { 
    height: 20px;
    width: 500px ;
}

.dropmenu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    z-index: 9999;

}

.dropmenu li a {
    display: block;
    padding: 0 14px;
    height: 26px;
    line-height: 25px;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 13px;
    color: #CCCCCC;
    border-left: 1px solid #555555;
    border-right: 1px solid #666666;
}
.dropmenu ul li:hover > a { color: #ff4200; }

.dropmenu li ul {
    position: absolute;
    top: 26px;
    left: 0;
    opacity: 0;
    background: #222222;
    -webkit-transition: opacity 0.2s ease-in-out 0.2s;
    -moz-transition: opacity 0.2s ease-in-out 0.2s;
    -o-transition: opacity 0.2s ease-in-out 0.2;
    -ms-transition: opacity 0.2s ease-in-out 0.2s;
    transition: opacity 0.2s ease-in-out 0.2s;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    display:none;
}

.dropmenu li:hover > ul { opacity: 1; }

.dropmenu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .3s ease .1s;
    -moz-transition: height .3s ease .1s;
    -o-transition: height .3s ease .1s;
    -ms-transition: height .3s ease .1s;
    transition: height .3s ease .1s;
}

.dropmenu li:hover > ul li {
    height: 27px;
    line-height: 27px;
    overflow: visible;
    padding: 0;

}

.dropmenu ul li a {
    width: 120px;
    padding: 0px 0px 0px 40px;
    margin: 0;
    border: none;
    border: 1px solid #666666;
}
.dropmenu ul li:hover a {
    background: #ffffff;
}
.dropmenu li:hover a {
    background: #222222;
}

.dropmenu ul li:last-child a { border-radius: 0 0 5px 5px;}

.dropmenu a.mail { background: url(../images/arrow2small.gif) no-repeat 6px center; }
.dropmenu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.dropmenu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

HTML

<div class="menubar">
<div class="menubarleft">

<!-- Start Menu -->
<ul class="dropmenu" id="dropmenu">
<!-- Home -->
    <li><a href="#" class="dropsmall2">Home</a>
    </li>
<!-- CPHome Close -->
<!-- Business Open -->    
    <li><a href="#" class="dropsmall2">Electrical</a>
        <ul>
            <li><a href="#" class="documents">Control Panel</a></li>
            <li><a href="#" class="documents">New Business</a></li>
            <li><a href="#" class="messages">Enhance</a></li>
            <li><a href="#" class="signout">Advertising</a></li>
            <li><a href="#" class="signout">Media</a></li>
        </ul>
    </li>
<!-- 2nd Close --> 
<!-- 3rd Open -->
    <li><a href="#" class="dropsmall2" >Plumbing</a>
        <ul>
            <li><a href="#" class="documents">Control Panel</a></li>
            <li><a href="#" class="signout">Manage domains</a></li>
            <li><a href="#" class="signout">Domain wizard</a></li>
            <li><a href="#" class="messages">Order domain</a></li>
            <li><a href="#" class="signout">Manage hosting</a></li>
        </ul>
    </li>
<!-- 3rd Close -->
<!-- 4th Open -->
    <li><a href="#" class="dropsmall2">Air & Water</a>
        <ul>
            <li><a href="#" class="signout">Inbox</a></li>
            <li><a href="#" class="documents">New Email </a></li>
            <li><a href="#" class="messages">Quick message</a></li>
            <li><a href="#" class="signout">Settings</a></li>
        </ul>
    </li>
<!-- 4th Close -->
<!-- 5th Open -->
        <li><a href="#" class="dropsmall2">Natural Homes</a>
        <ul>
            <li><a href="#" class="signout">Hobbiest</a></li>
            <li><a href="#" class="documents">Startup </a></li>
            <li><a href="#" class="messages">Companies</a></li>
            <li><a href="#" class="signout">Entreupenuer</a></li>
        </ul>
    </li>
<!-- 5th close -->
</ul> 

JS

    $('a.dropsmall2').click(function() {
    $('#dropmenu ul').show('medium');
    e.preventDefault();
    return false; 

  });

    $('#dropmenu a').click(function() {
    $(this).parents('ul').not('#dropmenu').hide('slow');
    e.preventDefault();
    return false;
  });

    $('#dropmenu ul').mouseleave(function() {
    $(this).hide('slow');
       return false;
});

https://jsfiddle.net/e9e17adm/1 - 由于某种原因现在混淆了小提琴根本不起作用

Answer 1

http://jsfiddle.net/e9e17adm/6/

只有改变（除了包括jQuery）才能成功

$(this).next('ul').show('medium');

而不是

$('#dropmenu ul').show('medium');

这样它只会点击他们点击的ul，而不是ul

中的所有#dropmenu元素