Question

这是我的菜单：

<ul class="menu">
 <li><img src="#" title="???"/></li>
 <li>Home<img src="#" title="Home"/></li>
 <li>Forums<img src="#" title="Forums"/></li>
 <li>Chat Rooms<img src="#" title="Chat Rooms"/></li>
 <li>Messages<img src="#" title="Messages"/></li>
 <li>Profile<img src="#" title="Profile"/></li>
 <li>News<img src="#" title="News"/></li>
 <li>Help/FAQ<img src="#" title="Help/FAQ"/></li>
</ul>

这是我的CSS：

body
{
 background-color: lightred;
 padding: 0;
 margin: 0;
}

.menu
{
 position: relative;
 top: 50px;
 padding: 0;
 margin: 0;
 list-style: none;
}

.menu li
{
 text-align: right;
 border: 1px solid black;
 border-left: 0;
 padding: 0px;
 margin: 0;
 margin-top; 20px;
 margin-bottom: 5px;
 width: 235px;
 position: relative;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
 left: -195px;
 font-size: 24px;
 font-family: Trebuchet MS;
 background-color: #EEE;
}

.menu li:hover
{
 background-color: #DDD;
 -webkit-box-shadow: 0px 0px 5px black;
 -moz-box-shadow: 0px 0px 5px black;
 box-shadow: 0px 0px 5px black;
}

.menu li img
{
 position: relative;
 top: 3px;
 padding: 0 10px 0 5px;
 margin: 0;
 height: 25px;
 width: 25px;
}

这是我的页面：

<!DOCTYPE HTML>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="<?php echo $this->config->item('base_url'); 

?>/styles/main.css" />
  <script type="text/javascript" src="<?php echo $this->config->item('base_url'); ?>/jquery-1.6.2.js"></script>
  <script type="text/javascript">
   $(document).ready(function()
   {
    $('ul li').click(function()
    {
     $(this).slideToggle("slow");
    }
   }
  </script>
 </head>
 <body>
  <?php $this->load->view('menu'); ?>
 </body>
</html>

理想情况下，当我点击它时，我希望我的菜单项向右滑动，然后当我点击其他内容时向左滑动。我一直在看这些网站，并且空白了。

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions http://api.jquery.com/slideToggle/

首先，我不确定是否需要提供我的列表项ID，或者我是否可以通用它。最初我有$（。menu li）.click（function（）...但是这似乎也没有用。我希望这样的菜单尽可能节省屏幕空间。我正在使用WAMP和CodeIgniter我相信这两个版本都是最新版本，因为我在上个月内已经下载了它们。我的jquery-1.6.2.js与Application，System，Styles和User_Guide位于同一文件夹中。我的脚本链接是否正确？我知道Toggle可能不是正确的方法，因为learningjquery网站说要使用animate函数并将left属性更改为从右到左，但我只是尝试一下。感谢所有和所有帮助。谢谢。< / p>

Answer 1

这更接近：

http://jsfiddle.net/qPgjM/

首先需要纠正的是你正在构建你的jQuery：

$(document).ready(function()
{
}

但它应该是这样的：

$(document).ready(function(){
});

（缺少右括号）

协助滑动菜单项

1 个答案: