0

我有这个 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无法选择。

有人知道我的案子吗？我做错了吗？

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

4

3 回答 3

0

您试图引用类，请根据您的 HTML 按 ID 引用它

  if($('a #info').length > 0) {
   $('a #info').click(function() {
于 2013-02-04T08:12:55.360 回答
0

尝试这个

$(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;
        }           
    });

//}

});
于 2013-02-04T08:14:18.907 回答
0

我的猜测是外部原因导致它不会多次触发，可能是 jquery.flexslider.js。如果该插件以某种方式重新创建链接，您可以尝试使用live或on取决于您的 jQuery 版本。

像这样的东西：

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

});

或者：

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

});

而且我认为没有必要检查长度——无论如何，您都可以声明点击事件，所以我也会删除该 if 语句。

祝你好运。

于 2013-02-04T08:23:25.180 回答