Question

我在2周前开始学习HTML，CSS和Javascript，我一直坚持这一点。

我想要的只是在点击菜单时显示子菜单。

我已经阅读了很多关于这些的内容。我甚至发现了一些类似的问题，但我不能使用这些脚本。

它只是不起作用。

这是HTML。

<body>

  <ul id="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">Services</a>
        <ul class="submenu">
           <li><a href="#">Serv 1</a></li>
           <li><a href="#">Serv 2</a></li>
           <li><a href="#">Serv 2</a></li>
        </ul>

     </li>
     <li><a href="#">Products</a>
        <ul class="submenu">
           <li><a href="#">Prod 1</a></li>
           <li><a href="#">Prod 2</a></li>
           <li><a href="#">Prod 2</a></li>
        </ul>

     </li>
     <li><a href="#">Customer</a></li>
     <li><a href="#">Contact</a></li>
  </ul>

以下是它的小提琴：http://jsfiddle.net/skV4h/，带有CSS和jQuery。

如果有人能帮助我，我会很高兴。

提前致谢。

Answer 1

你有几个问题，你的JavaScript代码没有正确结束，它应该是})而不仅仅是}，你也不会在你的小提琴上包含jQuery，最后如果您使用.submenu点击一个li，则.submenu元素会重叠，而现在的方式只会影响您的第一个.submenut。此外，如果您将.click()函数专门绑定到#menu，则会更好，否则当您单击其他li元素时也会触发您的代码。您可以将代码更改为：

$( '#menu').click(function () {  
    $submenu = $( this ).children( '.submenu' );
    if ( $submenu.is( ':hidden' ) ) {
            $submenu.slideDown( 'slow' );
            $('.submenu').not($submenu).hide();
        } else {
            $submenu.hide();
        }
});

<强> Working JSFiddle

Answer 2

此代码可以构成我

**HTML**

    <div class="navigation">
        <ul class="nav">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Services</a>
                <ul>
                    <li><a href="#">Consulting</a></li>
                    <li><a href="#">Sales</a></li>
                    <li><a href="#">Support</a></li>
                </ul>
            </li>
            <li>
                <a href="#">About Us</a>
                <ul>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Mission</a></li>
                    <li><a href="#">Contact Information</a></li>
                </ul>
            </li>
        </ul>
    </div>


**CSS**
h1 {
  font-family: Helvetica;
  font-weight: 100;
}
body {
  color:#333;
  text-align:center;
  font-family: arial;
}

.nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.nav li {
    float: left;
    width: 160px;
    position: relative;
}

.nav li a {
    background: #333;
    color: #fff;
    display: block;
    padding: 7px 8px;
    text-decoration: none;
    border-top: 1px solid #069;
}

.nav li a:hover {
    color: #069;
}

/*=== submenu ===*/

.nav ul {
    display: none;
    position: absolute;
    margin-left: 0px;
    list-style: none;
    padding: 0px;
}

.nav ul li {
    width: 160px;
    float: left;
}

.nav ul a {
    display: block;
    height: 15px;
    padding: 7px 8px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #222;
}

.nav ul li a:hover {
    color: #069;
}


**SCRIPT**


/*  jQuery ready function. Specify a function to execute when the DOM is fully loaded.  */
$(document).ready(
  /* This is the function that will get executed after the DOM is fully loaded */
  function () {
    /* Next part of code handles hovering effect and submenu appearing */
    $('.nav li').hover(
      function () { //appearing on hover
        $('ul', this).fadeIn();
      },
      function () { //disappearing on hover
        $('ul', this).fadeOut();
      }
    );
  }
);

Answer 3

好的，我稍微改了一下，因为它还没有工作。

<强> HTML

 <title>Example</title>

      <ul id="menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">Services</a>
            <ul class="submenu">
               <li><a href="#">Serv 1</a></li>
               <li><a href="#">Serv 2</a></li>
               <li><a href="#">Serv 2</a></li>
            </ul>

         </li>
         <li><a href="#">Products</a>
            <ul class="submenu">
               <li><a href="#">Prod 1</a></li>
               <li><a href="#">Prod 2</a></li>
               <li><a href="#">Prod 2</a></li>
            </ul>

         </li>
         <li><a href="#">Customer</a></li>
         <li><a href="#">Contact</a></li>
      </ul>

<强> CSS

*{
   margin:0;
   padding:0;
}

ul{
   list-style:none;
}

ul#menu{
   width:500px;
   margin:0 auto;
   position:relative;
}
ul#menu li{
   float:left;

}
ul#menu li a{
   display:block;
   float:left;
   padding:0 15px;
   height:25px;
   line-height:25px;
   text-decoration:none;
   color:#333;
   border:1px solid #ccc;
}

ul#menu li a:hover, ul#menu li a.ativo{
   background:#ccc;
}

ul#menu li ul{
   display:none;
   position:absolute;
   top:25px;
   left:0;
   width:460px;
   background:#ccc;
}

<强> JS

$( 'li').click(function () {  
    $(".submenu").hide();

    if ( $( '.submenu' ).is( ':hidden' ) ) {
            $(this).find(".submenu").slideDown( 'slow' );
        } 
});

fiddle

用jQuery的水平菜单

3 个答案: