2011-11-10 103 views
0

好的,所以我正在爲我們在這裏建立一個CMS在工作,我遇到了一個問題,我不能創建任何我的導航...jquery .click()似乎不工作

我的html導航看起來像這樣:

<ul class="menu collapsible shadow-bottom"> 
        <li> 
         <a href="dashboard.html" class=current> <img src="<?php echo base_url(); ?>inc/images/icons/packs/fugue/16x16/dashboard.png"> Dashboard</a> 
        </li> 

        <li> 
         <a href="javascript:void(0);"> <img src="<?php echo base_url(); ?>inc/images/icons/packs/fugue/16x16/blue-document-copy.png"> Pages</a> 
         <ul class=sub> 
          <li> 
           <a href="list_block.html"> View All</a> 
          </li> 
          <li> 
           <a href="list_shortcut.html"> Create New</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 

你會看到有2個列表。這涉及到UL類=子鏈接...

我曾嘗試:

$('.sub li a').click(function() { alert('something'); return false; }); 

我也嘗試添加一個類到每一個環節,即:類=「頁面」利用這個代碼:

$('.pages').click(function() { alert('something'); return false; }); 

而且這似乎也沒有工作。我茫然地明白這一點....

一旦我得到它的工作,我需要弄清楚以下出來......

  1. 刪除類=「當前」從DOM
  2. 什麼
  3. add class ='current'被添加到任何被點擊的物體中,除非在其下有子頁面的情況下..因爲你點擊子頁面(查看全部,在我的代碼中添加新的)添加類=「當前」到父頁面(「頁」)...

這是我現在的整個JS文件...

$().ready(function() { 
$('.loader').hide(); 

var validateloginform = $("#login-form").validate({ 
    submitHandler: function(e) { 
     $(e).parent().parent().fadeOut('slow'); 
     $('.loader').fadeIn('slow'); 
     setTimeout(function() { 
      $.ajax({ 
       url: $('#login-form').attr('action'), 
       type: 'POST', 
       data: $('#login-form').serialize(), 
       success: function(response) { 
        var obj = $.parseJSON(response); 
        if (obj.type == 'error') { 
         $('.loader').fadeOut(); 
         $(e).parent().parent().fadeIn(); 
         $('#login-form').alertBox(obj.msg, {type: 'error'}); 
        } 
        if (obj.type == 'success') { 
         window.location.replace(obj.msg); 
        } 
       } 
      })}, 3000 
     ); 
    }, 
    invalidHandler: function(form, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 ? 
      'You missed 1 field. It has been highlighted.' : 
      'You missed '+ errors + ' fields. They have been highlighted.'; 
      $('#login-form').removeAlertBoxes(); 
      $('#login-form').alertBox(message, {type: 'error'}); 
     } 
    } 
}) 

$('.logout').click(function() { 
    $.ajax({ 
     url: 'auth/logout', 
     type: 'POST', 
     success: function(response) { 
      window.location.reload(true); 
     } 
    }) 
    return false; 
}); 

$('.pages').click(function() { 
    alert('nope'); 
    return false; 
}); 
}); 

任何幫助表示讚賞。

我已經想通了,爲什麼它不工作,現在只是解決它......

jQuery.fn.initMenu=function(){ 
return this.each(function(){ 
    var a=$(this).get(0); 
    $("li:has(ul)",this).each(function(){ 
     $(">a",this).append("<span class='arrow'></span>") 
    }); 
    $(".sub",this).hide(); 
    $("li.expand > .sub",this).show(); 
    $("li.expand > .sub",this).prev().addClass("active"); 
    $("li a",this).click(function(d){ 
     d.stopImmediatePropagation(); 
     var c=$(this).next(); 
     var b=this.parentNode.parentNode; 
     if($(this).hasClass("active-icon")){ 
      $(this).addClass("non-active-icon"); 
      $(this).removeClass("active-icon") 
     }else{ 
      $(this).addClass("active-icon"); 
      $(this).removeClass("non-active-icon") 
     } 
     if($(b).hasClass("noaccordion")){ 
      if(c[0]===undefined){ 
       window.location.href=this.href 
      } 
      $(c).slideToggle("normal",function(){ 
       if($(this).is(":visible")){ 
        $(this).prev().addClass("active") 
       }else{ 
        $(this).prev().removeClass("active"); 
        $(this).prev().removeClass("active-icon") 
       } 
      }); 
      return false 
     }else{ 
      if(c.hasClass("sub")&&c.is(":visible")){ 
       if($(b).hasClass("collapsible")){ 
        $(".sub:visible",b).first().slideUp("normal",function(){ 
         $(this).prev().removeClass("active"); 
         $(this).prev().removeClass("active-icon") 
        }); 
        return false 
       } 
       return false 
      } 
      if(c.hasClass("sub")&&!c.is(":visible")){ 
       $(".sub:visible",b).first().slideUp("normal",function(){ 
        $(this).prev().removeClass("active"); 
        $(this).prev().removeClass("active-icon") 
       }); 
       c.slideDown("normal",function(){ 
        $(this).prev().addClass("active") 
       }); 
       return false 
      } 
     } 
    }) 
}) 
}; 
+0

你確定你沒有任何錯誤的頁面?你是通過ajax加載你的HTML嗎?你的代碼看起來很好 – karnyj

+0

我在我的jquery-ui中有1個異常,我通過刪除一些代碼來修復它......上面我的帖子中的最低代碼就是錯誤所在。今天我將開始逐行刪除,看看函數在哪裏引發問題,並希望看到修復。 – Johnny

回答

0

代碼:

jQuery.fn.initMenu=function(){ 
return this.each(function(){ 
var a=$(this).get(0); 
$("li:has(ul)",this).each(function(){ 
    $(">a",this).append("<span class='arrow'></span>") 
}); 
$(".sub",this).hide(); 
$("li.expand > .sub",this).show(); 
$("li.expand > .sub",this).prev().addClass("active"); 
$("li a",this).click(function(d){ 
    d.stopImmediatePropagation(); 
    var c=$(this).next(); 
    var b=this.parentNode.parentNode; 
    if($(this).hasClass("active-icon")){ 
     $(this).addClass("non-active-icon"); 
     $(this).removeClass("active-icon") 
    }else{ 
     $(this).addClass("active-icon"); 
     $(this).removeClass("non-active-icon") 
    } 
    if($(b).hasClass("noaccordion")){ 
     if(c[0]===undefined){ 
      window.location.href=this.href 
     } 
     $(c).slideToggle("normal",function(){ 
      if($(this).is(":visible")){ 
       $(this).prev().addClass("active") 
      }else{ 
       $(this).prev().removeClass("active"); 
       $(this).prev().removeClass("active-icon") 
      } 
     }); 
     return false 
    }else{ 
     if(c.hasClass("sub")&&c.is(":visible")){ 
      if($(b).hasClass("collapsible")){ 
       $(".sub:visible",b).first().slideUp("normal",function(){ 
        $(this).prev().removeClass("active"); 
        $(this).prev().removeClass("active-icon") 
       }); 
       return false 
      } 
      return false 
     } 
     if(c.hasClass("sub")&&!c.is(":visible")){ 
      $(".sub:visible",b).first().slideUp("normal",function(){ 
       $(this).prev().removeClass("active"); 
       $(this).prev().removeClass("active-icon") 
      }); 
      c.slideDown("normal",function(){ 
       $(this).prev().addClass("active") 
      }); 
      return false 
     } 
    } 
}) 
}) 
}; 

有問題..所以刪除此行:

d.stopImmediatePropagation(); 

一旦做到這一點,添加基於鏈接的自動類更改...在第一個else語句之後添加以下內容,它應該完美工作。

if ($(b).hasClass('menu')) { 
$('ul.menu li a').removeClass("current"); 
} 

if ($(b).hasClass('sub')) { 
$('ul.sub li a').removeClass("current"); 
} 
$(this).addClass('current'); 

有可能是一個更優雅的方式來實現自動類更改...但這個工程...當你點擊主菜單的一部分時,它會作爲當前頁面被觸發......然後如果主菜單中的那個項目有一個子菜單,當你點擊它時它會被觸發爲子菜單的當前頁面同時不會降低主菜單的設置。

現在只能與之抗衡的東西,就是如果你希望兩個功能,如:

$('.menu li a').click(function() {}); 

$('.sub li a').click(function() {}); 

與此,出於某種原因,菜單一個工作正常,但是當你點擊子,這兩個功能都被觸發...

1

你錯過了周圍的類名引號。應該是這樣的......

<ul class='sub'> 

那麼這將工作:

$('.sub li a').click(function() { alert('something'); return false; }); 

jsFiddle Example

+0

不是唯一的一個..但html5不需要引號,除非有空格。儘管我嘗試了它,甚至將它們添加到了所有缺少它們的元素中,但它仍然不起作用。 – Johnny

+0

不,它不工作..它一直帶我到鏈接頁面..我沒有戒備... – Johnny

+0

然後你有更大的問題,因爲我提供的例子證明它的工作完美。 – Gabe

0

這可能發生,因爲身體在你處理被加載。 嘗試(未經測試*)像

$(function () { 
    //after body load do ... 

    // validation 

    // logout 

    // and navigation click 
    // if you were to manipulate the html/dom you would also need to use jQuerys live 

    $('.pages').live('click', function (e) { 
     // do something when clicked 
    }); 
}); 
+0

我實際上沒有處理之前,它加載...。()在頂部照顧... – Johnny

+0

編輯代碼塊,所以最後});顯示在裏面。並且一眼就看出你在$('。logout')之前似乎缺少一個分號。 – daxroc

+0

我已經編輯了我的上級文章,我想出了真正的問題......現在只是爲了解決它... – Johnny