Создание меню: замена href на функцию jQuery click & toggle

Я создал базовый 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>

wordpress html toggle jquery preventdefault
person Community    schedule 09.10.2013    source источник
comment
В чем именно проблема? Вы хотите отображать контент, когда вы нажимаете ссылку, а когда вы нажимаете другую ссылку, скрыть предыдущее содержимое и показать содержимое в соответствии с этой ссылкой?   -  person Andrew Surdu    schedule 09.10.2013
comment
Точно. Также без перезагрузки страницы, если это возможно.   -  person    schedule 09.10.2013

Ответы (2)


arrow_upward
0
arrow_downward

Я могу придумать пару способов сделать это.

1) вы предварительно загружаете весь контент wordpress в отдельные div, даете идентификаторы div, относящиеся к ссылкам в меню. Когда вы щелкаете ссылку, она выдвигает соответствующий DIV к идентификатору.
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, как и изначально, поэтому материал с идентификатором спорный.

person Snowburnt    schedule 09.10.2013
comment
Привет Снежный. Прежде всего спасибо за помощь. У меня это работает. Единственная проблема в том, что когда я нажимаю другой пункт меню, содержимое остается прежним. Это потому, что preventDefault по-прежнему отключает исходный href (который относится к содержимому страницы)? - person ; 09.10.2013
comment
с помощью решения, которое я закодировал, вам придется предварительно загрузить все данные в разные разделы. Я добавлю тот, который включает ajax. - person Snowburnt; 09.10.2013
comment
Да, я пробовал этот метод раньше. Когда я использую это, вся страница (вместо the_content) загружается в div #content. Также страница теперь перезагружает / обновляет все, когда вы нажимаете другой пункт меню. Есть предположения? - person ; 09.10.2013
comment
проверьте ответ в этом вопросе: stackoverflow.com/questions/15175020/. По сути, вам нужно будет создать действие php ajax и зарегистрировать его в своей теме. - person Snowburnt; 09.10.2013

arrow_upward
1
arrow_downward

Вы можете использовать функцию 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);
    });
});
person LeGEC    schedule 09.10.2013