隱藏（）顯示（）與內容滑塊

Question

我是一個新的計算器，這是我的第一篇文章。 我想讓hide（）顯示（）在多個對象上工作，但我無法使它與內容滑塊（液體滑塊）一起工作。 http://www.alfonsocarmelo.it/margherita/index10.html 加載網站時，可以查看滑塊（相機滑塊），但是，當我點擊左下角的「architettura」，然後點擊「centro culturale - 世博會'Flussi di eVenti，Catania」應該查看內容滑塊（圖像和文本）與液體滑塊腳本。該腳本單獨工作完美，但在網站上有問題;它是可見的狹窄，而完美的視圖是100％的視口寬度。

HTML

<div id="architettura"> 
    <div class="content"> 
     <h4><span>A</span>rchitettura<span>/</span></h4> 
     <img src="images/architettura/architettura.jpg"> 
    </div> 
</div> 

<!-- architettura_centro_culturale_catania--> 
<div id="architettura_centro_culturale_catania"> 
    <div class="content"> 
     <div class="liquid-slider" id="slider-id"> 
       <div> 
        <h2 class="title">1</h2> 

        <div class="immagini"> 
         <img src="images/pittura_02.jpg"> <!-- ELIMINAZIONE DIV E METTERE X OGNI FOTO align="left" width="60%" height="36%"--> 
         <img src="images/pittura_03.jpg"> 
         <img src="images/pittura_04.jpg"> 
        </div> 

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudindasdas</p> 
       </div> 
       <div> 
        <h2 class="title">2</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p> 
       </div>   
       <div> 
        <h2 class="title">3</h2> 
        <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> 
        <h2 class="title">4</h2> 
        <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p> 
       </div> 
     </div> 
     <!-- Liquid Slider Ends Here --> 


    </div> 
    <!-- end content --> 
</div> 
<!-- end architettura_centro_culturale_catania--> 

<!-- architettura_centro_culturale_giarre--> 
<div id="architettura_centro_culturale_giarre"></div> 
<!-- end centro culturale Giarre --> 

<div id="slideshow"> 
    <div class="content"> 
      <div class="fluid_container"> 

       <div class="camera_wrap camera_magenta_skin" id="camera_wrap_1"> 

       <div data-src="images/slides/prova3_modificata.jpg"> 

        <div class="camera_caption fadeFromBottom"> 
         pittura <span>/</span> LA RICCHEZZA INTERIORE 
        </div> 

       </div> 

       <div data-src="images/slides/prova4_modificata.jpg"> 
        <div class="camera_caption fadeFromBottom"> 
         architettura <span>/</span> MUSEO D&acute;ARTE CONTEMPORANEA E CENTRO POLIFUNZIONALE 
        </div> 
       </div> 



      </div> <!-- #camera_wrap_1 --> 

      </div> <!-- .fluid_container --> 
    </div> 
</div> 


</section> 

<footer> 
<nav> 
    <ul id="fmenu"> 
     <li> 
     <a href="#" id="idarchitettura"><span>a</span>rchitettura</a> 
      <ul id="fmenu_architettura"> 
       <li id="centro_culturale_catania"><a href="#">centro culturale - Expo' Flussi di eVenti, Catania </a></li> 
       <li id="centro_culturale_giarre"><a href="#">centro culturale, Giarre</a></li> 
      </ul> 
     </li> 
     <li> 
     <a href="#" id="idpittura"><span>p</span>ittura</a> 
      <ul id="fmenu_pittura"> 
       <li id="la_ricchezza_interiore"><a href="#">la ricchezza interiore</a></li> 
       <li id="trattenuta_da_1_sentimento"><a href="#">trattenuta da un sentimento</a></li> 
       <li id="il_bacio"><a href="#">il bacio</a></li> 
       <li id="sguardo_ignoto"><a href="#">sguardo all&acute;Ignoto</a></li> 
       <li id="kolorimmersi"><a href="#">kolorimmersi</a></li>  
       <li id="gli_amanti"><a href="#">gli Amanti</a></li> 
       <li id="la_danzatrice"><a href="#">la danza(U)trice</a></li> 
       <li id="lottare_senza_mani_senza_piedi"><a href="#">lottare senza mani e senza piedi</a></li> 
       <li id="kolorinaere"><a href="#">kolorinaere</a></li> 
      </ul> 
     </li> 
     <li> 
     <a href="#" id="iddesign"><span>d</span>esign</a> 
      <ul id="fmenu_design"> 
       <li id="borse_accessori"><a href="#">borse e accessori</a></li> 
       <li id="monili"><a href="#">monili</a></li> 
       <li id="oggetti_arredo"><a href="#">oggetti d&acute;arredo</a></li> 
      </ul> 
     </li> 
     <li id="pubblication"><a href="#"><span>p</span>ubblicazioni</a></li> 
     <li id="profile"><a href="#"><span>p</span>rofilo</a></li> 
    </ul>   
</nav> 
    </footer> 

jQuery代碼

$('#idarchitettura').click(function() { 

       $('#slideshow').hide(); 

       $('#architettura_centro_culturale_catania').hide(); 
       $('#architettura_centro_culturale_giarre').hide(); 
       $('#pittura').hide(); 
       $('#pittura_la_ricchezza_interiore').hide(); 
       $('#pittura_trattenuta_da_1_sentimento').hide(); 
       $('#pittura_il_bacio').hide(); 
       $('#pittura_sguardo_ignoto').hide(); 
       $('#pittura_kolorimmersi').hide(); 
       $('#pittura_gli_amanti').hide(); 
       $('#pittura_la_danzatrice').hide(); 
       $('#pittura_lottare_senza_mani_senza_piedi').hide(); 
       $('#pittura_kolorinaere').hide(); 
       $('#profilo').hide(); 
       $('#pubblicazioni').hide(); 
       $('#design').hide(); 
       $('#design_borse_accessori').hide(); 
       $('#design_monili').hide(); 
       $('#design_oggetti_arredo').hide(); 

       $('#architettura').fadeIn('slow'); 

       /*for menu'*/ 
       $('#fmenu_architettura').slideToggle(); 
       $('#fmenu_pittura').slideUp('fast'); 
       $('#fmenu_design').slideUp('fast'); 
     }); 

     $('#centro_culturale_catania').click(function() { 

       $('#pubblicazioni').hide(); 
       $('#profilo').hide(); 
       $('#architettura').hide(); 
       $('#architettura_centro_culturale_giarre').hide(); 
       $('#pittura').hide(); 
       $('#pittura_la_ricchezza_interiore').hide(); 
       $('#pittura_trattenuta_da_1_sentimento').hide(); 
       $('#pittura_sguardo_ignoto').hide(); 
       $('#pittura_il_bacio').hide();  
       $('#pittura_kolorimmersi').hide(); 
       $('#pittura_gli_amanti').hide(); 
       $('#pittura_la_danzatrice').hide(); 
       $('#pittura_lottare_senza_mani_senza_piedi').hide(); 
       $('#pittura_kolorinaere').hide(); 
       $('#design').hide(); 
       $('#design_borse_accessori').hide(); 
       $('#design_monili').hide(); 
       $('#design_oggetti_arredo').hide(); 

       $('#architettura_centro_culturale_catania').fadeIn('slow'); 
     }); 

    }); 

我嘗試另一個滑塊的腳本，但是，我有同樣的問題，所以我認爲有一個與隱藏（）來說明一個問題（）與滑塊腳本..

任何幫助將不勝感激...我失去了如何做到這一點。 謝謝你的優勢。

阿方索

Answer 1

阿方索，執行一定是錯的。我確信你分享的.js代碼不是插件實現的一部分。另外，我不太明白爲什麼你使用單個ID隱藏所有這些div。即使你真的需要所有這些ID，我也會添加一個類來一次性隱藏它們（這會使代碼運行得更快）。例：如果你改變所有這些ID一類=「toHide」，或添加類，而不是所有的線，你可以簡單地使用：

$('.toHide').hide(); 

與繁榮。一切都會一樣。 I recommend you double-check how you should be using your slider plugin。

Answer 2

第七是正確的，你不應該像這樣分開隱藏你的元素。它可能會導致性能問題，而且它也只是一些草率的代碼。

但是，關於您的Liquid Slider問題，這是因爲滑塊不知道面板的高度（因爲它們已隱藏）。

如果您在DOM樹看，你看：

<div class="liquid-slider" id="slider-id" style="height: 0px;"> 

注意的高度爲0？

Liquid Slider可讓您訪問大部分內部功能。您首先必須將滑塊設置爲對象，然後才能調整高度。我想你可以在顯示滑塊的點擊事件上添加adjustHeight()方法。試試看看。

var sliderObject = $.data($('#slider-id')[0], 'liquidSlider'); 

sliderObject.adjustHeight();