是开关案例还是动画方法?

时间:2013-06-07 01:07:45

标签: javascript jquery

我只是没有足够的javascript经验来调试它。任何帮助将不胜感激。

在下面的代码中,我不确定我的

    switch($el_title.innerHTML)

或者是我的

    .animate( style , 400, function() {

声明不正确。 它可能都是。

我不确定$ el_title.innerHTML是否正确。 相应的HTML看起来像这样

    <ul>
      <li>
        <a href="images/Appetizers.jpg">About</a>
    ...

我创建了一个样式变量作为​​对象样式= {}; 我认为这是如何制作一个对象变量。 将该样式变量传递给.animate似乎不起作用。

以下是完整的代码:

      initEventsSubMenu = function() {
        $menuItems.each(function(i) {
          var $item       = $(this), // the <li>
          $el_title       = $item.children('a:first'),
          el_image        = $el_title.attr('href'),
          $sub_menu       = $item.find('.ac_subitem'),
          $ac_close       = $sub_menu.find('.ac_close'),
          style           = {};

      switch($el_title.innerHTML)
        {
          case 'About':
                       style = {height:'400px',marginTop:'-200px'};
                       break;
          case 'Menu':
                      style = {height:'200px',marginTop:'-150px'};
                      break;
          case 'Take-Out':
                      style = {height:'500px',marginTop:'-250px'};
                      break;
          case 'Gallery':
                      style = {height:'200px',marginTop:'-150px'};
                      break;
          case 'Contact':
                      style = {height:'400px',marginTop:'-200px'};
                      break;
          default:
                      style = {height:'400px',marginTop:'-200px'};
        }

        $el_title.bind('click.Menu', function(e) {
           $.when(toggleMenuItems('down')).done(function(){
              openSubMenu($item, $sub_menu, el_image);
           });
        return false;
        });

        /* closes the submenu */
        $ac_close.bind('click.Menu', function(e) {
          closeSubMenu($sub_menu);
        return false;
        });
      });
    },
        openSubMenu     = function($item, $sub_menu, el_image, style) {
          $sub_menu.stop()
          .animate( style , 400, function() {

              /*
              .animate({
                 height          : '200px',
                 marginTop       : '-150px'
               }, 400, function() { 
              */

另外 - 我知道底部的注释代码有效。 而且我确信我的收尾很好。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

$el_title是一个jQuery对象,但.innerHTML是一个DOM元素属性。您应该使用$el_title.text()代替$el_title.innerHTML

变化:

openSubMenu($item, $sub_menu, el_image);

为:

openSubMenu($ item,$ sub_menu,el_image,style);