带有 jQuery 的水平菜单答案

【问题标题】：Horizontal menu with jQuery带有 jQuery 的水平菜单
【发布时间】：2014-08-04 11:20:56
【问题描述】：

两周前我开始学习 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。

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

提前致谢。

【问题讨论】：

如果你记得包含 jQuery 并正确关闭你的代码，它会起作用jsfiddle.net/j08691/skV4h/4

标签： jquery menu

【解决方案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

【讨论】：

【解决方案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();
      }
    );
  }
);

【讨论】：

【解决方案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;
}

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

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

fiddle

【讨论】：

Html 和 css 是一样的。我只改js。