2014-02-13 239 views
-2

這是網站:http://test.slatong.com/如何在一個div顯示時隱藏所有其他div?

在標題菜單中。當你懸停每個列表項時,它將顯示不同的div#id。

我想知道如何隱藏所有其他div的時候彼此格表示很喜歡這個網站的標題:http://www.hytwatches.com/

我仍然在試圖找到辦法。

這裏是我寫的代碼:

<div id="slidemenu"> 
      <!--- HEADER --> 
      <header class="top-header"> 

      <div class="container"> 
       <div class="row"> 

       <nav class="main-navigation"> 

        <ul class="menu col-lg-10" > 
        <li data-file="about"> 
         <a href="" class="item col-lg-2"> 
         about us 
         </a> 
        </li> 
        <li data-file="collection"> 
         <a href="" class="item col-lg-2"> 
         collection 
         </a> 
        </li> 
        <li id="logo"> 
         <a href="" class="middle col-lg-2"> 
         <img src="img/logo.png" alt=""> 
         </a> 
        </li> 
        <li data-file="innovation"> 
         <a href="" class="item col-lg-2"> 
         innovation 
         </a> 
        </li> 
        <li data-file="find-us"> 
         <a href="" class="item col-lg-2"> 
         find us 
         </a> 
        </li> 
        </ul> 

        <div class="socials col-lg-2"> 

        <ul> 
         <li> 
         <a href="" class="facebook"> 
          f 
         </a> 
         </li> 
         <li> 
         <a href="" class="twitter"> 
          t 
         </a> 
         </li> 
         <li> 
         <a href="" class="youtube"> 
          y 
         </a> 
         </li> 
        </ul> 

        </div> 
        <!--- socials --> 

       </nav> 
       <!--- end main navigation --> 

       </div> 
       <!--- end row --> 
      </div> 
      <!--- end container --> 

      </header> 
      <!--- end top header --> 



      <!--- SUB MENU SECTION --> 
      <section> 

      <div id="sub_menu"> 
       <div class="container"> 
       <div class="row"> 
        <nav> 
       <ul class="dspn" id="about"> 
        <li class="col-lg-3"> 
        <a href=""> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href=""> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href=""> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href="http://www.hytwatches.com/Services/PressMedia.sls" > 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
       </ul> 
       </nav> 



       <nav> 
       <ul class="dspn" id="innovation"> 
        <li class="col-lg-3"> 
        <a href="http://www.hytwatches.com/Innovation/HYTScience.sls"> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href="http://www.hytwatches.com/Innovation/HYTnnovation.sls"> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href="http://guide.hytwatches.com"> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
       </ul> 
       </nav> 

       <nav> 
       <ul class="dspn" id="find-us"> 
        <li class="col-lg-3"> 
        <a href="http://www.hytwatches.com/Services/CustomerService.sls" > 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href="http://www.hytwatches.com/Services/ContactHYT.sls" > 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href="http://www.hytwatches.com/Services/Retails.sls"> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
        <li class="col-lg-3"> 
        <a href="http://lounge.hytwatches.com"> 
         <img src="img/about/about-behind_hyt.png" > 
        </a> 
        </li> 
       </ul> 
       </nav> 

      </div> 
      </div> 
      </div> 


      </section> 
      <!--- end sub menu section --> 

這裏是jQuery代碼:

$(document).ready(function(){ 
    var id = $(".main-navigation ul li").data("file"); 
     $("#sub_menu nav ul#" + id).addClass("dspn"); 

}); 
+4

請分享你的JavaScript代碼 –

+4

你有沒有在這使得任何試圖自己這麼遠? SO不是一個網站來請求代碼,而是請求幫助解決您已有的代碼。此外,最好將問題代碼包含在帖子中,而不是鏈接到外部網站。一旦問題得到解決,外部網站將不再有用作爲路上其他人的參考。 –

+0

對不起,我只是重寫了我的問題。 –

回答

0

嘗試

$(document).ready(function() { 
    $(".main-navigation ul li").each(function() { 
     var id = $(this).data("file"); 
     $("#" + id).addClass("dspn"); 
    }); 
    $(".main-navigation ul li").on("mouseenter", function (e) { 
     var id = $(this).data("file"); 
     var $target = $("#" + id).stop(true).slideDown(); 
     clearTimeout($target.data('hoverTimer')); 
    }).on("mouseleave", function() { 
     var id = $(this).data("file"); 
     var $target = $("#" + id); 
     var timer = setTimeout(function() { 
      $target.stop(true).slideUp(); 
     }, 200); 
     $target.data('hoverTimer', timer); 
    }); 

    $('#sub_menu .dspn').hover(function() { 
     clearTimeout($(this).data('hoverTimer')); 
    }, function() { 
     var $this = $(this); 
     var timer = setTimeout(function() { 
      $this.stop(true).slideUp(); 
     }, 200); 
     $this.data('hoverTimer', timer); 
    }) 
}); 
+0

太棒了!有用。非常感謝你。 –

0
<ul> 
    <li data="one">home</li> 
    <li data="two">about us</li> 
</ul> 
<div data="one" class="hide">1</div> 
<div data="two" class="hide">2</div> 
<script> 
    $('li').mouseover(function(){ 
     var data = $(this).attr("data"); 
     $('div[data]').each(function(){ 
      var innerData = $(this).attr("data"); 
      if(innerData == data){ 
       $(this).addClass('display'); 
       $(this).removeClass('hide'); 
      }else{ 
       $(this).addClass('hide'); 
       $(this).removeClass('display'); 
      } 

     }); 

    }); 
</script> 

u可以使用上面的一段代碼。 CSS:

.hide{ 
     display: none; 
    } 
    .display{ 
     display: block; 
    } 
+0

是的不要忘記添加jQuery庫。 :) –

+0

是的。謝謝 :) –

相關問題