创建菜单：用 jQuery 单击和切换功能替换 href

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，您可以使用 .load() 函数，就像 LeGEC 在我之前所说的那样。这是我的代码适应它。这假定链接实际上指向您要加载的文章内容。

$("#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 的内容没有实际意义。