2014-06-10 29 views
0

洙的一切,我有我知道應該是很容易的問題解決...什麼都沒有我曾嘗試如何似乎工作,我在Javascript是新甚至更多的Jquery新手,所以我希望有人能幫助我。jQuery的切換問題,顯示1個列表上點擊,但隱藏第二次點擊

http://jsfiddle.net/YNL9a/

jQuery代碼:

function hidedivs() { 
    $("#content").children().hide(); 
}; 


$(document).ready(function() { 
    hidedivs(); 
    $("#menu,#submenu").hide(); 
     $("h3").click(function(){ 
      $("#menu").toggle("slow"); 
      $("#submenu").hide("slow"); 
     }); 


    $("nav a").click(function(event){ 
     var url = $(this).attr("href"); 
     hidedivs(); 
     $(url).toggle("slow");  
     $(url).children().hide(); 
     $(url).find("h1, p, li, img").toggle(); 
     event.preventDefault(); 
    }); 

}); 

和HTML代碼:

<h3> Marsel van Oosten Photography</h3> 
    <div id="wrapper"> 
    <nav> 
     <ul id="menu"> 
      <li> <a href=".work">Work</a></li> 
      <li> <a href=".about">About</a></li> 
      <li> <a href=".news">News</a></li> 
      <li> <a href=".contact">Contact</a></li> 
     </ul> 
     <ul id="submenu" class="work"> 
       <li> <a href=".people">People</a></li> 
       <li> <a href=".objects">Objects</a></li> 
       <li> <a href=".series">Series</a></li> 
     </ul> 
    </nav> 

      <section id="content"> 
       <div class="about"> 
        <h1>About</h1> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
       </div> 
       <div class="news"> 
        <h1>News</h1> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
       </div> 
       <div class="contact"> 
        <h1>Contact</h1> 
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
       </div> 

       <div class="people"> 
       <h1>People</h1> 
       <img src="images/people1.jpg" width="600" height="386"> 
       <img src="images/people2.jpg" width="600" height="400"> 
       </div> 
       <div class="objects"> 
       <h1>Objects</h1> 
       <img src="images/object1.jpg" width="600" height="400"> 
       <img src="images/object2.jpg" width="600" height="279"> 
       </div> 
       <div class="series"> 
       <h1>Series</h1> 
       <img src="images/series1.jpg" width="600" height="413"> 
       <img src="images/series2.jpg" width="600" height="416"> 
       </div> 
      </section> 
    </div> 

現在我的問題是:當我在頁眉/名稱單擊,在菜單下拉。 (作品) 然後,當我點擊工作,一個子菜單下降(工程)。 當我在子菜單中點擊鏈接它顯示2個picutures(作品) 當我在菜單鏈接點擊它顯示的文字(作品)。 當我點擊H3 /名稱再次菜單/子菜單,隱藏再次(作品)。當菜單,子菜單和照片的都出現 我所試圖做的是。當他們隱藏時,他們都隱藏,當他們隱藏後點擊名稱,只有菜單和其他任何東西顯示(再次做同樣的故事:))

希望somoene可以幫助我:)

回答

0

在你的JavaScript,只需添加這條線,如圖所示,$( 「H3」)內。點擊()。

$("h3").click(function(){ 
    $("#menu").toggle("slow"); 
    $("#submenu").hide("slow"); 

    $("#content").children().hide("slow"); // Add this line 
}); 

它也會隱藏內容/圖像,您可以重複整個過程。從你的描述來看,我認爲這就是你想要的。請讓我知道,如果這是你想要的。

+0

謝謝!工作正如我想要的:)我只是沒有添加.children,當我嘗試自己:)無論如何,非常感謝! – Xereoth

+0

很高興看到它的工作。 :) –

相關問題