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。

有没有人对我的案子有所了解？我做错了吗？

任何帮助表示赞赏......谢谢......

Answer 1

您尝试引用类，根据您的HTML

引用ID

  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){

});

我认为没有必要检查长度 - 你可以声明click事件，所以我也会删除if语句。

祝你好运。

点击时锚链接无法点击

3 个答案: