Question

我创建了一个基本的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>

Answer 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);
    });
});

Answer 2

我可以想到几种方法。

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的东西都没有用。

创建菜单：用jQuery click＆amp;替换href;切换功能

2 个答案: