Създаване на меню: замяна на href с функция за щракване и превключване на jQuery

Създадох основен jsFiddle, за да дам пример за това, върху което работя. (Използвам Wordpress & Bootstrap.)

Моят проблем:

Всеки елемент от менюто има href, който препраща към страница в моя back-end на 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="/bg">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 в отделни divs, давате на divs идентификатори, свързани с връзките в менюто. Когато щракнете върху връзката, тя изплъзва съответния 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 за съдържание, какъвто сте имали първоначално, така че нещата с идентификатора са спорни.

person Snowburnt    schedule 09.10.2013
comment
Здравей Snowburnt. Първо благодаря за помощта. Това работи за мен. Единственият проблем е, че когато щракна върху друг елемент от менюто, съдържанието остава същото. Това е така, защото 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

Можете да използвате функцията .load() на jQuery, за да заредите съдържанието чрез 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