2012-08-14 25 views
0

我想複製上點擊第二個下拉菜單元素的JavaScript效應「聯繫」菜單元素下拉重複下拉

http://www.dawaf.co.uk/jj/

我有重複的HTML代碼的「生物」菜單元素效應在header.php中:

<!-- contact --> 
<section id="contact"> 
    <!-- container --> 
    <div class="container"> 
       <p>Creative Consultant/Stylist<br /><br /><a href="mailto:[email protected]">[email protected]</a><br /> 
       +44(0) 7983 572330</p> 

    </div> 
    <!-- .container --> 

</section> 
<!-- .contact --> 

<!-- bio --> 
<section id="bio"> 
    <!-- container --> 
    <div class="container"> 
       <p>Testing this shows up</p> 

    </div> 
    <!-- .container --> 

</section> 
<!-- .bio --> 

,我已經重複了CSS

我不知道的JavaScript我需要編輯得到相同的EF什麼FECT上的script.js:

/* Show the portfolio 
    ------------------------------------------------- */ 

    $('#portfolio-catcher').click(function() { 

     $('h1 a').trigger('click'); 

     return false; 

    }); 

    $('a[href="#portfolio"]').click(function() { 

     // hide contact 
     $('#contact').stop().slideUp({ 
      duration: 250, 
      easing: 'easeInOutCubic' 
     }); 

     // remove the iframe content (for vimeo videos) 

     $('iframe').remove(); 

     hattie.showPortfolio(); 

     return false; 


    }); 

    /* Contact section click 
     ------------------------------------------------- */ 
     $('a[href="#contact"]').click(function() { 

      // hide slideshow whatever 
      $('#slideshow').stop().slideUp({ 
       duration: 300, 
       easing: 'easeInOutCubic' 
      });  

      // show contact 
      $('#contact').stop().slideDown({ 
       duration: 300, 
       easing: 'easeInOutCubic' 
      }); 

      hattie.showPortfolio(); 

      return false; 

    }); 

    /* Launching a project 
    ------------------------------------------------- */ 

    $('hgroup').click(function() { 

     // scroll to top 
     $.scrollTo(0, 250); 

     $hgroup  = $(this); 
     // hide contact 

     if ($('#contact').is(':visible')) { 

      $('#contact').stop().slideUp({ 
       duration: 250, 
       easing: 'easeInOutCubic' 
      }); 
     } 

     // show the loading gif in the container 
     $('#slideshow-container').html('<div class="loading"><img src="/assets/img/loading.gif" alt="loading"/></div>'); 

     $('section#work').stop().animate({ 
      'margin-top' : '+=' +($(window).height() - 55) + 'px' 
     }, 700, 'easeInOutCubic', function() { 

      // load the project into the slideshow container div 
      $('#slideshow-container').load('' + $hgroup.attr('data-project'), function() { 
       // bind slideshow 
        slideshow.render(); 
        $('section#work').css('margin-top', '0px'); 
      }); 

     }); 

     return false; 

    }); 

}, 

this.folioLinkShow = function() { 

    if ($('.slide').length > 1) { 


     $('#portfolio-catcher').hover(function() { 

      $('nav#show-projects div').slideDown(200); 


     }, function() { 

      $('nav#show-projects div').slideUp(200); 

     }); 


    } else { 

     $('nav#show-projects').unbind(); 

    } 
}, 

this.loadImages  = function() { 

回答

0

讓你的「生物」 href的:#bio

然後,將它添加到你的Javascript(它會做同樣的事情接觸點擊會做:

/* Contact section click ------------------------------------------------- */ 
$('a[href="#contact"]').click(function() { 
    // hide bio 
    if ($('#bio').is(':visible')) { 
     $('#bio').stop().slideUp({ 
      duration: 250, 
      easing: 'easeInOutCubic' 
     }); 
    } 
    // hide slideshow whatever 

     $('#slideshow').stop().slideUp({ 
      duration: 300, 
      easing: 'easeInOutCubic' 
     });  

     // show contact 
     $('#contact').stop().slideDown({ 
      duration: 300, 
      easing: 'easeInOutCubic' 
     }); 

     hattie.showPortfolio(); 

     return false; 

}); 

/* Bio section click ------------------------------------------------- */ 
$('a[href="#bio"]').click(function() { 
    // hide contact 
    if ($('#contact').is(':visible')) { 
     $('#contact').stop().slideUp({ 
      duration: 250, 
      easing: 'easeInOutCubic' 
     }); 
    } 

    // hide slideshow whatever 
    $('#slideshow').stop().slideUp({ 
     duration: 300, 
     easing: 'easeInOutCubic' 
    });  

    // show contact 
    $('#bio').stop().slideDown({ 
     duration: 300, 
     easing: 'easeInOutCubic' 
    }); 

    hattie.showPortfolio(); 

    return false; 

}); 
+0

謝謝。如果您在「聯繫人」和「生物」之間跳轉,則文本會出現在另一個之上。如果您在「聯繫方式」和「投資組合」之間跳轉,是否有辦法阻止並以同樣的方式工作? – user1096057 2012-08-14 20:03:01

+0

我編輯了我的答案,基本上你只想隱藏聯繫人部分。這應該做到這一點。 – 2012-08-14 20:07:06

+0

謝謝。如果你從「聯繫人」跳轉到「生物」,但這似乎只能工作,但如果從「生物」跳轉到「聯繫人」,則不會。對不起,我應該在我最後的消息中更清楚 – user1096057 2012-08-14 20:15:17