導航子菜單不會滑出。我的JavaScript不工作？

我是新手，所以我不確定我在做什麼錯在這裏！導航子菜單不會滑出。我的JavaScript不工作？

這是我的jsfiddle：http://jsfiddle.net/alh3168/UwG7h。

我試圖做一個簡單的飛出導航菜單，其中的子菜單滑出到導航菜單的右側。我希望它與此類似：http://jsfiddle.net/ReuLr/6。我嘗試了一切;是否有可能使這個CSS而不是JavaScript？你看到我的代碼中的任何錯誤都阻止滑出navbar工作？提前致謝！

這裏是我的javascript，我只是從以前的jsfiddle複製：

$(document).ready(function() { 
    var secs1 = $('ul.first > li'); 
    secs1.hover(
    function() { 
     $(this).find('ul.second').animate({ 
      width: 'toggle' 
     }, 500); 
    }, 
    function() { 
     $(this).find('ul.second').animate({ 
      width: 'toggle' 
     }, 250); 
    }); 
});

來源

2014-02-26 user3344592

從你提供的例子開始，我做了如下修改：

從HTML刪除了h1標籤
將navigation的style屬性值寫入CSS
添加了一些CSS Ë元素div.menu ul

Here's a Fiddle including the modifications made

注：

JS代碼不被修改（這是與您的例子的JS代碼）。
使用的jsfiddle的時候，不要忘了從「框架和擴展」列表中選擇jQuery的;）

CSS：

#navigation { 
    background-color:#FFF; 
    height:100%; 
    width:250px; 
    float:left; 
} 

/********************/ 
/* MENU   */ 
/*******************/ 
div.menu { 
    width: 200px; 
    float: left; 
    position: relative; 
} 
/* ADDITIONAL CSS */ 
div.menu ul { 
    list-style-type: none; 
    margin-top: 0; 
    padding-left: 0; 
} 
div.menu ul li { 
    margin-bottom: 1px; 
} 
div.menu ul.first li a { 
    width: 190px; 
    height: 22px; 
    background-color: #00293E; 
    color: #ffffff; 
    text-decoration: none; 
    display: block; 
    padding: 7px 10px 0 0; 
    text-align: right; 
    font-weight: bold; 
    cursor: pointer; 
    cursor: hand; 
} 
div.menu ul.first li a:hover { 
    background-color: #B2CC7F; 
    color: #00293E; 
} 
div.menu ul.second { 
    position: absolute; 
    left: 200px; 
    top: 0; 
    z-index: 10; 
    display: none; 
    width: 190px; 
} 
div.menu ul.second:hover { 
    display: block; 
} 
div.menu ul.second li a { 
    width: 190px; 
    height: 22px; 
    background-color: #B2CC7F; 
    color: #00293E; 
    text-decoration: none; 
    display: block; 
    padding: 7px 10px 0 0; 
    text-align: right; 
    font-weight: bold; 
    cursor: pointer; 
    cursor: hand; 
} 
div.menu ul.second li a:hover { 
    background-color: #597A5E; 
    color: #ffffff; 
}

HTML：

<div id="navigation"> 
    <header id="header-main"> 
     <img src="Logos/headerlogo.jpg" width="215" height="80" longdesc="Logos/headerlogo.jpg"> 
     <hr size=1 width=175 align=left style=margin-left:35px> 
     <div class="menu"> 
      <ul class="first"> 
       <li> <a href="" title="" runat="server">Home</a> 
       </li> 
       <li> <a href="" title="" runat="server">Blog</a> 

        <ul class="second"> 
         <li><a href="" title="" runat="server">Sub category 1</a> 
         </li> 
         <li><a href="" title="" runat="server">Sub category 2</a> 
         </li> 
         <li><a href="" title="" runat="server">Sub category 3</a> 
         </li> 
         <li><a href="" title="" runat="server">Sub category 4</a> 
         </li> 
         <li><a href="" title="" runat="server">Sub category 5</a> 
         </li> 
         <li><a href="" title="" runat="server">Sub category 6</a> 
         </li> 
        </ul> 
       </li> 
       <li> <a href="" title="" runat="server">Instagram</a> 
       </li> 
       <li><a href="" title="" runat="server">About</a> 
       </li> 
       <li><a href="" title="" runat="server">Store</a> 

        <ul class="second"> 
         <li><a href="" title="" runat="server">Etsy</a> 
         </li> 
         <li><a href="" title="" runat="server">Society6</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="" title="" runat="server">Portfolio</a> 

        <ul class="second"> 
         <li><a href="" title="" runat="server">Capstone</a> 
         </li> 
         <li><a href="" title="" runat="server">Visual Communications</a> 
         </li> 
         <li><a href="" title="" runat="server">Illustration</a> 
         </li> 
         <li><a href="" title="" runat="server">Photography</a> 
         </li> 
         <li><a href="" title="" runat="server">Painting</a> 
         </li> 
         <li><a href="" title="" runat="server">Printmaking</a> 
         </li> 
         <li><a href="" title="" runat="server">Fibers</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="" title="" runat="server">Contact</a> 

        <ul class="second"> 
         <li><a href="" title="" runat="server">E-mail</a> 
         </li> 
         <li><a href="" title="" runat="server">Linked In</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <hr size=1 width=175 align=left style=margin-left:35px> 
     <ul id="search-list"> 
      <form method="get" action="http://www.andreahock.com"> 
       <table cellpadding="0px" ; cellspacing="0px"> 
        <tr> 
         <td style="border-style:solid none solid solid; border-color:#C93;border-width:1px;"> 
          <input type="text" name="zoom_query" placeholder=" search the blog" style="width:150px; font-family: Neou-Bold; src: url('Neou-Bold.otf'); font-size:8px;letter-spacing:1px ;border:#FFF; height:17px; padding:0px 3px; position:relative;"> 
         </td> 
         <td style="border-style:solid; border-left:#FFF;border-color:#C96;border-width:1px;"> 
          <input type="submit" value="" style="border-style: none; border-left:#FFF ;background: url('jpegs/magnifyingglass.jpg') no-repeat; width: 20 px; height:23 px;"> 
         </td> 
        </tr> 
       </table> 
      </form> 
     </ul> 
    </header> 
</div> 
<div id="content">Content goes here</div> 
<div id="footer" style="background-color:#DABC69; font-family: Neou-Bold; src: url('Neou-Bold.otf'); font-size:10px;letter-spacing:1px; clear:both; text-align:center;">All designs belong to Andrea Hock</div> 
</div>

JS：

$(document).ready(function() { 
    $('ul ul').each(function() { 
     $(this).parent('li').mouseover(function() { 
      $(this).find('ul.second').stop(true, true).animate({ 
       width: "toggle" 
      }, { 
       queue: false, 
       duration: 250 
      }); 
     }).mouseout(function() { 
      $(this).find('ul.second').stop(true, true).animate({ 
       width: "toggle" 
      }, { 
       queue: false, 
       duration: 250 
      }); 
     }); 
    }); 
});

來源

2014-02-26 03:47:09 Littm

非常感謝您的幫助！由於某些原因，當我將它放入Dreamweaver中時，它仍然不起作用。不知道爲什麼，因爲它在jsfiddle中完美運行。 – user3344592

我唯一的問題是如何使飛出菜單的高度達到100％。 – user3344592

@ user3344592：你好，夥計！我認爲你應該發佈這個作爲一個新的問題，以獲得更多的答案和建議:)。你也可以嘗試提供你想要的截圖。 – Littm

我只是需要正確調用javascript！這就是爲什麼它不能在Dreamweaver中工作。感謝您的幫助！

<script type="text/javascript"> 
    $(document).ready(function() { 

$('ul ul').each(function() { 
    $(this).parent('li').mouseover(function() { 
     $(this).find('ul.second').stop(true, true).animate({ 
      width: "toggle" 
     }, { 
      queue: false, 
      duration: 450 
     }); 
    }).mouseout(function() { 
     $(this).find('ul.second').stop(true, true).animate({ 
      width: "toggle" 
     }, { 
      queue: false, 
      duration: 450 
     }); 
    }); 
});

}）;

來源

2014-02-26 23:08:06 user3344592

導航子菜單不會滑出。我的JavaScript不工作？

回答

相關問題