1

我创建了一个基本的jsFiddle来举例说明我正在做的事情。（我正在使用 Wordpress 和 Bootstrap。）

我的问题：

每个菜单项都有一个 href 引用我的 Wordpress 后端中的一个页面。当您单击一个菜单项时，会加载一个新页面并忽略 jQuery 函数。所以我过去常常preventDefault忽略href。现在，当我单击另一个菜单项时，没有从后端加载任何新内容，因为 preventDefault 已禁用原始 href。

有没有什么办法解决这一问题？因此，如果您单击菜单项，则 div#content会向右滑动，其中包含该页面的实际内容。

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）您将所有wordpress内容预加载到单独的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，就像你最初拥有的那样，所以带有 id 的东西是没有实际意义的。

于 2013-10-09T14:15:03.757 回答