2

特定の要素をクリックすると、divを開いて表示する機能を作成しました。私はこれらのいくつかを1つのページに持っています。特定の div のみを開いた状態でそのページにリンクするにはどうすればよいですか? 「http://domain.com/#cat1」のようにリンクできるようにしたい..

答えてくれてありがとう！

HTML:

<a href="#cat1" id="cat1" class="h3 toggle">Lorem ipsum</a>
                        <div class="list-container">
                            <ul class="list">
                                <li class="faq">
                                    <p>Lorem ipsum</p>
                                </li><ul>

JavaScript:

hShow : function(event) {
            var el = $(this),
                arrow = $('span.arrow', this),
                container = el.next('div.list-container'),
                faqList = $('.faq-list:nth(0)', container),
                hList;

            event.stopPropagation();
            event.preventDefault();

            if (container.height() > 0) {
                // collapse
                el.removeClass('expanded');
                container.css({'padding-bottom': '0px'}).animate({'height': '0px'}, 250);
            } else {
                // expand
                hList = faqList.height();
                el.addClass('expanded');
                container.animate({'height': hList +'px'}, 250, function() {
                        $(this).css({
                            'padding-bottom': '10px',
                            'height': 'auto'
                        });
                    });
            }
4

3 に答える 3

2

リンクのクリックとページの読み込みイベントを同じロジックで処理するだけです。div の上のアンカーを見つけて、対応する div を表示します。

function openDivUnderAnchor(name){
    name = name.replace('#','');
    $('div.collapsible').hide();
    $('a[name='+name+']').next('div').show();
}

$(document).ready(function(){
    // opens the correct div if its link is clicked
    $(document).on('click', 'a.open', function(){
        openDivUnderAnchor($(this).attr('href'));
    });
    // opens the correct div if its anchor is specified in the URL
    openDivUnderAnchor(location.hash);
});​

<ul>
    <li><a class="open" href="#one">first</a></li>
    <li><a class="open" href="#two">second</a></li>
    <li><a class="open" href="#three">third</a></li>
    <li><a class="open" href="#four">fourth</a></li>
</ul>

<a name="one"></a>
<div class="collapsible">first div</div>

<a name="two"></a>
<div class="collapsible">second div</div>

<a name="three"></a>
<div class="collapsible">third div</div>

<a name="four"></a>
<div class="collapsible">fourth div</div>​

作業フィドル: http://jsfiddle.net/q2v2S/2/

于 2012-11-19T17:35:22.123 に答える
1

URL の「ローカル部分」を使用できます。これは、http://www.example.com/#cat1のような URLで、# の後の部分「cat1」です。たとえば、この部分に、表示する div の ID、またはあなたの場合はボタン リンクの ID を入力します。

最初に div を開かないでページを表示し、次に Javascript を使用して document.location.hash を使用してローカル部分、つまりボタン ID を取得します。次に、その ID に対応する div を表示するか、ボタンのクリックをシミュレートします。

ハッシュ手法のまとめ: http://blog.mgm-tp.com/2011/10/must-know-url-hashtechniques-for-ajax-applications/ (Ajax について説明されていますが、動的なものには適しています)

于 2012-11-19T17:20:11.953 に答える
0

私が過去にこれを行った方法は、URL ハッシュを調べてクリックを「偽造」することでした。

例えば：

$(function()
{
if(!location.hash) return; // don't do anything if no hash set

$('a.toggle[href="' + location.hash + '"]').click();
});

そのため、ロード時 ( $(function() { ... });) ハッシュが設定されている場合( ) if(!location.hash)...、href が現在に設定されているクラス トグルを持つアンカー タグを見つけ、そのタグでlocation.hashクリック イベントを偽装します。これにより、ユーザーが実際にクリックしたかのように、展開がトリガーされます。

于 2012-11-19T17:17:44.457 に答える