2

a href リンクをクリックすると、a href リンクがアコーディオン内で機能しません。アコーディオンのJS機能がa hrefリンクを上書きしているようです。リンクをクリックすると、別のページを開く代わりに、内外に展開します (これが JS の機能です)。これは、JS の元の機能です。私がやりたいことは、アコーディオン機能を維持し、a href リンクを機能させることです。コード例は次のとおりです: http://jsfiddle.net/mrPWa/

    <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 <script type="text/javascript">


$(function() { 
height = $(window).height();
 $('.Accord').css({height: height});

    $('.Accord').toggle(function() {
   $('.Accord').animate({width: "20%"}, 500 );
      $(this).removeClass('deSelect');
         $(this).animate({ width: "40%"}, {duration: 500, queue: false});
            $('.deSelect').animate({width: "15%"}, {duration: 500, queue: false});
               $(this).addClass('deSelect');

  }, function() {   
       $('.deSelect').animate({width: "20%"}, 500);



  });
 });

a href リンクはこちらです。

   <body>

      <div id="Sponsorships_index">

<div id="accordionWrapper">

    <ol>
        <li id="snow" class="Accord deSelect">
        <a href="http://www.apple.com/"> 
        <h1>Apple link is not working!!!!!</h1></a>

        </li>

        <li id="street" class="Accord deSelect">
              <a href="http://www.apple.com/"> 
        <h1>Apple link is not working!!!!!</h1></a>
        </li>

        <li id="water" class="Accord deSelect">

        </li>

        <li id="dirt" class="Accord deSelect">

        </li>

        <li id="sound" class="Accord deSelect">

        </li>
    </ol>
</div>​

  </div>
    </body>
4

1 に答える 1

3

これをトグル関数の最後に追加します

.on('click', 'a', function(e) { e.stopPropagation(); })

イベントが膨らむのを防ぐために。

だからあなたはで終わる

$('.Accord').toggle(function() {
    $('.Accord').animate({ width: "20%" }, 500)
    $(this).removeClass('deSelect')
    $(this).animate({ width: "40%" }, { duration: 500, queue: false })
    $('.deSelect').animate({ width: "15%" }, { duration: 500, queue: false })
    $(this).addClass('deSelect')
}, function () {
    $('a').click(function(e) { e.stopPropagation(); })
    $('.deSelect').animate({ width: "20%" }, 500)
}).on('click', 'a', function(e) { e.stopPropagation(); })

ここでテストしてください: http://jsfiddle.net/RASG/sSG2f/

于 2012-10-17T16:33:46.840 に答える