javascript - 下拉菜单不起作用

Question

我的下拉菜单有问题。 Language 和 Request 下拉菜单不起作用，只有 Categories 下拉菜单起作用。 javascript 有问题，这是代码

HTML

<div id="mbmcpebul_wrapper" style="text-align:center;padding-left:215px;">
  <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
  <li><div class="buttonbg gradient_button"><a href="Home" target="_self">Home</a></div></li>
  <li><div class="buttonbg gradient_button"><a href="Categories" target="_self">Categories</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem  first"><a href="Action" target="_self">Action</a></li>
    <li class="gradient_menuitem"><a href="Adventure" target="_self" title="">Adventure</a></li>
    <li class="gradient_menuitem"><a href="Animation" target="_self" title="">Animation</a></li>
    <li class="gradient_menuitem"><a href="Comedy" target="_self" title="">Comedy</a></li>
    <li class="gradient_menuitem"><a href="Crime" target="_self" title="">Crime</a></li>
    <li class="gradient_menuitem"><a href="Drama" target="_self" title="">Drama</a></li>
    <li class="gradient_menuitem"><a href="Family" target="_self" title="">Family</a></li>
    <li class="gradient_menuitem"><a href="Fantasy" target="_self" title="">Fantasy</a></li>
    <li class="gradient_menuitem"><a href="Horror" target="_self" title="">Horror</a></li>
    <li class="gradient_menuitem"><a href="Romance" target="_self" title="">More..</a></li>
    <li class="gradient_menuitem"><a href="Romance" target="_self" title="">Romance</a></li>
    <li class="gradient_menuitem"><a href="Sci-Fi"  target="_self" title="">Sci-Fi</a></li>
    <li class="gradient_menuitem last"><a href="Thriller" target="_self" title="">Thriller</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Browse" target="_self">Language</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem first"><a href="Arabic" target="_self" title="">Arabic</a></li>
    <li class="gradient_menuitem"><a href="Brazilian" target="_self" title="">Brazilian</a></li>
    <li class="gradient_menuitem"><a href="Dutch" target="_self" title="">Dutch</a></li>
    <li class="gradient_menuitem"><a href="English" target="_self" title="">English</a></li>
    <li class="gradient_menuitem"><a href="French" target="_self" title="">French</a></li>
    <li class="gradient_menuitem"><a href="German" target="_self" title="">German</a></li>
    <li class="gradient_menuitem"><a href="Greek" target="_self" title="">Greek</a></li>
    <li class="gradient_menuitem"><a href="Indonesian" target="_self" title="">Indonesian</a></li>
    <li class="gradient_menuitem"><a href="Malay" target="_self" title="">Malay</a></li>
    <li class="gradient_menuitem"><a href="Norwegian" target="_self" title="">Norwegian</a></li>
    <li class="gradient_menuitem"><a href="Romanian" target="_self" title="">Romanian</a></li>
    <li class="gradient_menuitem"><a href="Spanish" target="_self" title="">Spanish</a></li>
    <li class="gradient_menuitem"><a href="Swedish" target="_self" title="">Swedish</a></li>
    <li class="gradient_menuitem"><a href="Thai" target="_self" title="">Thai</a></li>
    <li class="gradient_menuitem"><a href="Turkish" target="_self" title="">Turkish</a></li>
    <li class="gradient_menuitem last"><a href="Vietnamese" target="_self" title="">Vietnamese</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Contact/Request" target="_self">Request</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem first"><a href="Contact/Request-Movie" target="_self" title="">Movie</a></li>
    <li class="gradient_menuitem last"><a href="Contact/Request-Other" target="_self" title="">Other</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Help-us" target="_self">Help us</a></div></li>
  </ul>
</div>

完整 http://jsfiddle.net/sfpj77p5/1/

Answer 1

看起来根本不需要你的 JavaScript，我这样注释掉了它:

$(document).ready(function() {
    /*$(".gradient_menuitem:gt(9)").css("display","none");

$(".gradient_menuitem:eq(9)").click ( function (e) {
                                     e.preventDefault();

             $(".gradient_menuitem:gt(9)").css("display","block");       
    $(".gradient_menuitem:eq(9)").hide();
                                     });


$(".gradient_menu").mouseleave(function(){
   $(".gradient_menuitem:gt(9)").hide();       
    $(".gradient_menuitem:eq(9)").show();
});*/
});

现在您的菜单工作正常。 Have a look .

编辑:以下是“类别”菜单中“更多”按钮的操作:

<li class="gradient_menuitem"><a href="Romance" target="_self" title="">More..</a>
            <ul class="gradient_menu">
                <li class="gradient_menuitem"><a href="Romance" target="_self" title="">Romance</a></li>
        <li class="gradient_menuitem"><a href="Sci-Fi"  target="_self" title="">Sci-Fi</a></li>
        <li class="gradient_menuitem last"><a href="Thriller" target="_self" title="">Thriller</a></li>
            </ul>

您只需在“gradient_menu”类的 ul 标签内添加“浪漫”、“科幻”和“惊悚”菜单。 Have a look there并复制 HTML。其余的都取决于您的 CSS。