錨鏈接無法點擊，當點擊

Question

我有這樣的HTML代碼：

<link rel="stylesheet" type="text/css" href="css/style.css"> 
<link rel="stylesheet" href="assets/css/flexslider2.css" type="text/css" media="screen" /> 
<script src="scripts/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/menu.js"></script> 
    <script defer src="assets/js/jquery.flexslider.js"></script> 

    <script type="text/javascript"> 

    $(window).load(function(){ 
$('.flexslider').flexslider({ 
     animation: "fade", 
     randomize: true, 
     controlNav: false, 
     start: function(slider){ 
      $('body').removeClass('loading'); 
     } 
     }); 
    }); 
    </script> 
<div class="flexslider"> 
    <ul class="slides"> 
     <li> 
     <a href="#"><img src="images/alpine-chalet/1.jpg" /></a> 
     <p class="flex-caption">Alpine Chalet</p> 
     <p class="flex-id-num">1/6</p> 
     </li> 
     <li> 
     <a href="#"><img src="images/alpine-chalet/2.jpg" /></a> 
     <p class="flex-caption">Alpine Chalet</p> 
     <p class="flex-id-num">2/6</p> 
     </li> 
     .... 

    </ul> 
</div> 
<div class="info-container" style="display:none"> 

    <h2>Alpine Chalet</h2> 
    <div class="info-content"> 
     <p>Lorem ipsum</p> 

     <p>Lrem ipsum.</p> 

     <p>lorem ipsum.</p> 

     <div id="names-by-group"> 
      <h5>Team (Architecture and Interior Design)</h5>  
      <p>Lrem ipsum</p> 

      <h5>Construction</h5> 
      <p>lorem ips</p> 

      <h5>Photography </h5> 
      <p>Lorem ips</p> 
     </div> 
    </div> 
</div> 
<a href="#" class="info open" id="info">INFO</a> 

和我menu.js

$(document).ready(function() { 
if($('a.info').length > 0) { 
     $('a.info').click(function() { 
      if ($(this).hasClass('open')) { 
       $(this).removeClass('open'); 
       $(this).addClass('close'); 
       $('.flexslider').fadeOut(200); 
       $(".info-container").fadeIn(200); 
       //return false; 
      } else { 
       $(this).removeClass('close'); 
       $(this).addClass('open'); 
       $(".info-container").fadeOut(200); 
       $('.flexslider').fadeIn(200); 
       //return false; 
      }   
     }); 

    } 

}); 

我現在的問題是加載頁面時，它顯示了flexslider和當我點擊info按鈕時，它會隱藏flexslider並顯示info-container，但現在不能再單擊info鏈接。我想知道爲什麼，我嘗試突出顯示文字，但不能選擇info。

有沒有人有關於我的情況的想法？我做錯了嗎？

任何幫助表示讚賞... ... THX

Answer 1

你想參考類，見它通過ID按你的HTML

if($('a #info').length > 0) { 
    $('a #info').click(function() { 

Answer 2

試試這個

$(document).ready(function(e) { 
    e.preventDefault(); 
    //if($('a.info').length > 0) { 
    $('a.info').click(function() { 
     if ($(this).hasClass('open')) { 
      $(this).removeClass('open'); 
      $(this).addClass('close'); 
      $('.flexslider').fadeOut(200); 
      $(".info-container").fadeIn(200); 
      //return false; 
     } else { 
      $(this).removeClass('close'); 
      $(this).addClass('open'); 
      $(".info-container").fadeOut(200); 
      $('.flexslider').fadeIn(200); 
      //return false; 
     }   
    }); 

//} 

}); 

Answer 3

我的猜測是外部導致它不會多次觸發的東西，可能是jquery.flexslider.js。如果插件以某種方式重新創建鏈接，則可以嘗試使用live或on，具體取決於您的jQuery版本。

事情是這樣的：

$('a.info').live('click', function() { 

}); 

或者：

$(document).on('click', 'a.info', function(e){ 

}); 

而且我看不出有任何需要檢查的長度 - 你可以不管聲明單擊事件，所以我想除去if語句。

祝你好運。