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をクリックすると が非表示になりが表示されることですが、リンクはもうクリックできません。なぜだろう、テキストをハイライトしようとしても選択できない。infoflexsliderinfo-containerinfoinfo

誰かが私のケースについて考えを持っていますか? 私は間違ったことをしましたか？

助けていただければ幸いです... Thx ...

4

3 に答える 3

0

class を参照しようとしています。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. そのプラグインが何らかの形でリンクを再作成している場合は、jQuery のバージョンに応じて、liveまたは使用を試みることができます。on

このようなもの：

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

});

または：

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

});

そして、長さをチェックする必要はないと思います-関係なくクリックイベントを宣言できるので、ifステートメントも削除します。

幸運を。

于 2013-02-04T08:23:25.180 に答える