隐藏（）显示（）与内容滑块

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();