1

私が取り組んでいることの例を示すために、基本的なjsFiddleを作成しました。（私はWordpressとBootstrapを使用しています。）

私の問題：

各メニュー項目には、Wordpress バックエンドのページを参照する href があります。メニュー項目をクリックすると、新しいページが読み込まれ、jQuery 関数は無視されます。そのため、以前preventDefaultは href を無視していました。preventDefault によって元の href が無効になっているため、別のメニュー項目をクリックしても、バックエンドから新しいコンテンツが読み込まれなくなりました。

これを修正する方法はありますか？したがって、メニュー項目をクリックする#contentと、そのページの実際のコンテンツを含む div が右側にスライドします。

JS

$("#menu-hoofdnavigatie li a").click(function (event) {
    event.preventDefault();

    var effect = 'slide',                   // Set the effect type
        options = { direction: 'left' },    // Set the options for the effect type chosen
        duration = 700;                     // Set the duration

    $('#content').toggle(effect, options, duration);
});

HTML

<section id="content" class="col-lg-5 height-inherit no-padding">
    <div class="content-inner">
        <a class="closure pull-right">X</a>
        <h1><span>_ </span><?php the_title(); ?></h1>
        <article>
            <?php the_content(); ?>
        </article>
        <div class="border"></div>
        <a class="see-more" href="">Bekijk mijn realisaties <i class="icon-long-arrow-right"></i></a>
    </div>
</section>
4

2 に答える 2

1

jQuery の.load()関数を使用して、ajax 呼び出しを介してコンテンツをロードし、#contentノード内に配置できます。

$("#menu-hoofdnavigatie li a").click(function (event) {
    event.preventDefault();

    var url = this.href;
    $('#content').load( url, function(){
      var effect = 'slide',                   // Set the effect type
          options = { direction: 'left' },    // Set the options for the effect type chosen
          duration = 700;                     // Set the duration

      $('#content').toggle(effect, options, duration);
    });
});
于 2013-10-09T14:13:05.013 に答える
0

これを行うにはいくつかの方法が考えられます。

1) すべてのワードプレス コンテンツを個別の div にプリロードし、メニューのリンクに関連する div ID を指定します。リンクをクリックすると、対応する DIV が ID にスライドします。
2) ajax 呼び出しを使用してコンテンツをロードし、単一のスライド div のコンテンツを置き換えます。

また、スライドイン機能を変更して、スライドインが完了した後に新しく選択されたアイテムをスライドアウトするコールバックを持つようにします。

$("#navigation li a").click(function (event) {
    event.preventDefault();

    var effect = 'slide',                   // Set the effect type
        options = { direction: 'left' },    // Set the options for the effect type chosen
        duration = 700,                     // Set the duration
        id = this.id.replace('item','');

    if ($('.out').length>0){
        $('.out').toggle(effect,options,duration, function(){
            $(this).removeClass('out');
            $('#content'+id).toggle(effect, options, duration, function(){
                $(this).addClass('out');
            });
        });
    } else {
        $('#content'+id).toggle(effect, options, duration, function(){    
                $(this).addClass('out');
        });
    }
});

オプション1について私が言っていることを示すために、フィドルを変更したものを次に示します。

http://jsfiddle.net/vy4hR/

それを ajax するには、LeGEC が私の前に言ったように .load() 関数を使用できます。これがそれに適応した私のコードです。これは、リンクが実際に読み込みたい記事コンテンツを指していることを前提としています。

$("#navigation li a").click(function (event) {
    event.preventDefault();

    var effect = 'slide',                   // Set the effect type
        options = { direction: 'left' },    // Set the options for the effect type chosen
        duration = 700,                     // Set the duration
        href = $(this).attr('href');

    if ($('.out').length>0){
        $('.out').toggle(effect,options,duration, function(){
            $(this).removeClass('out');
            $('#content').load(href, function(){
                $('#content').toggle(effect, options, duration, function(){
                   $(this).addClass('out');
                });
             });
        });
    } else {
        $('#content').load(href, function(){
                $(this).toggle(effect, options, duration, function(){    
                    $(this).addClass('out');
                });
        });
    }
});

このソリューションでは、最初に持っていたように、コンテンツ DIV が 1 つしかないため、id を持つものは意味がありません。

于 2013-10-09T14:15:03.757 に答える