4

jQuery のアコーディオン UI 要素を使用してページに取り組んでいます。この例に基づいて HTML をモデル化しましたが、<li>要素内に順序付けされていないリンクのリストがいくつかあります。このような:

  $(document).ready(function() {
     $(".ui-accordion-container").accordion(
        {active: "a.default", alwaysOpen: true, autoHeight: false}
     );
  });

  <ul class="ui-accordion-container">
  <li> <!-- Start accordion section -->
   <a href='#' class="accordion-label">A Group of Links</a>
   <ul class="linklist">
      <li><a href="http://example.com">Example Link</a></li>
      <li><a href="http://example.com">Example Link</a></li>
   </ul>

   <!--and of course there's another group -->

問題: リンクが機能しない

私がテストしたすべてのブラウザーで、これらのアコーディオン メニューのリンクは、リンクされたページに移動する代わりに、アコーディオン セクションを折りたたむ原因となります。(今でも右クリックしてリンク先のサイトに移動できます。)

これは、何らかのクリック バインドの問題でしょうか?

4

9 に答える 9

10

デフォルトでは、アコーディオン ウィジェットはすべてのリンクをヘッダーに設定します。変更するには、オプションでセレクターを指定する必要がありheadersます。したがって、コードは次のようになります。

$(".ui-accordion-container").accordion(
   { active: "a.default", ...,  header: "a.accordion-label" }
);
于 2008-12-01T22:57:22.690 に答える
8

イベントのバブリングを防止するインライン オンラインを追加してみてください。

...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...

または、次のような domready イベント:

$(".toggle-title a").click(function(event){ event.stopPropagation()})

ただし、コード的には理にかなっていますが、後者は私にとってはうまくいきませんでした.jQueryはクリックを実行します! 私にそれを説明できる人なら誰でもお気軽に、私は MooTools と addEvent 関数を持つ Google Closure のバックグラウンドから来ました。

于 2013-07-16T16:34:18.133 に答える
4

これとまったく同じ問題があり、どこにも答えが見つかりませんでした。実際、いくつかの情報源は、それは不可能だと言っています.

さらにプレイすると、実用的な解決策が見つかりました。素晴らしいことではないかもしれませんが、魅力のように機能します。

まず、クリック可能にしてアコーディオン コントロールの影響を受けないようにしたいリンクが簡単に識別できることを確認してください。私は私のクラスを持っていました。

 $('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));

setTimeout ( function() {
  expander.accordion('enable');
}, 250 );

});

基本的に、これはアコーディオン ヘッダー内のリンクがクリックされたときにリッスンします。その場合、アコーディオンは一時的に無効になり、通常どおりに起動できなくなります。この場合、リンクは新しいウィンドウで開かれますが、document.location も使用できます。

アコーディオンをすぐに再度有効にすると、アコーディオンが起動してトグルします。非常に短いタイムアウトで十分な遅延が得られることがわかりました。

これが誰かを助けることを願っています!

于 2009-07-28T17:23:50.227 に答える
2

ここに本当に簡単な解決策があります

http://www.designerstalk.com/forums/help-me/41297-jquery-accordion-embedding-links-help-needed.html

于 2009-10-25T23:10:53.913 に答える
0

AlwaysOpen は true でなければなりません。

于 2009-05-19T11:34:57.863 に答える
0

ソリューション http://www.colorizate.com/jquery-acordion-hack-link-interno/

于 2010-07-15T00:49:40.620 に答える
0

私の提案は accordion() 関数を使用していない可能性があります [以前は知りませんでした。取り上げてくれてありがとう:)] しかし、それでもアコーディオン UI 要素を使用する方法を示しています。

HTML

<body id="body">
    <h2>Accordian</h2>
        <div id="accordion" class="">

                <div class="toggle_all">
                        <ul class="links">
                                <li><a class="openall" href="#"><span>Open All</span></a></li>
                                <li>|</li>
                                <li><a class="closeall" href="#"><span>Close All</span></a></li>
                        </ul>
                </div>

                <!-- toggleAll ends -->
                <div class="accordion">
                        <div class="section_title_accordion design-gray">
                                <h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
                        </div>
                        <!-- section_title_accordion ends -->
                        <div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>

                        <!-- accordion_content ends -->
                </div>
                <!-- accordion ends -->
                <div class="accordion">
                        <div class="section_title_accordion design-gray">
                                <h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
                        </div>
                        <!-- section_title_accordion ends -->

                        <div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
                        <!-- accordion_content ends -->
                </div>
                <!-- accordion ends -->
                <div class="accordion">
                        <div class="section_title_accordion design-gray">
                                <h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>

                        </div>
                        <!-- section_title_accordion ends -->
                        <div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
                        <!-- accordion_content ends -->
                </div>
                <!-- accordion ends -->
        </div>

        <!-- #accordion ends -->
</body>

CSS

<style type="text/css" >
#body { margin-left:20%; font:12px verdana; }
.accordion { width:500px; }
h3 { margin:0; padding:0; }
.section_title_accordion { float:left; width:500px; margin:2px 0 0; }
.section_title_accordion h3 span { margin:0; float:left; color:#fff; padding:2px 0 3px 10px; }
.section_title_accordion a span { padding-left:20px; }
.accordion_content { border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; float:left; padding:5px 3px; }
.accordion_content span.content { margin:5px 0 0; }
.design-gray { background:#003366; }
.design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366; text-decoration:none; }
.design-gray a:hover { text-decoration:underline;}
.on .design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366;}
.accordion_content_hover { background:#ffffcc; color:#000099; }
.toggle_all { padding:20px 0; width:500px; margin-bottom:5px; }
.toggle_all ul { padding:0; margin:0; }
.toggle_all ul li { list-style-type:none; }
.toggle_all .links li { float:left; padding-left:5px; }
.toggle_all .links li a, .toggleAll .links span { color:#666666; }
</style>

jQuery

<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $(".accordion_content").hide();
  $("a.open").click(function() {
    $(this).parents(".accordion").find(".accordion_content").toggle();
        $(this).parents(".accordion").toggleClass('on');    
        return false;
  });   

    $(".accordion_content").mouseover(function() {
            $(this).addClass('accordion_content_hover');
            return false;       
    });

    $(".accordion_content").mouseout(function() {
            $(this).removeClass('accordion_content_hover');
            return false;       
    });

    $("a.openall").click(function() {
        $(".accordion_content").show();
        $(this).parents("#accordion").find(".accordion").addClass('on');
        return false;
    });
    $("a.closeall").click(function() {
          $(".accordion_content").hide();
          $(this).parents("#accordion").find(".accordion").removeClass('on');
        return false;
    });
});
</script>

お役に立てれば。

于 2009-07-28T17:49:31.860 に答える
0

この問題がまだ発生している場合は、別のスクリプトを使用できます: http://twostepmedia.co.uk/notes/development/jquery-accordion/

于 2012-02-22T11:01:11.660 に答える
-1

あなたの他の質問に対する私の答えが言うように:

 navigation: true

オプションリストに設定する必要があります。

于 2008-12-01T22:45:03.993 に答える