如何在一个div显示时隐藏所有其他div？

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

});

来源

2014-02-13 Anubhap Panyasri

请分享你的JavaScript代码 –

你有没有在这使得任何试图自己这么远？ SO不是一个网站来请求代码，而是请求帮助解决您已有的代码。此外，最好将问题代码包含在帖子中，而不是链接到外部网站。一旦问题得到解决，外部网站将不再有用作为路上其他人的参考。 –

对不起，我只是重写了我的问题。 –

尝试

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

来源

2014-02-13 16:42:21

太棒了！有用。非常感谢你。 –

<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; 
    }

来源

2014-02-13 17:27:10

是的不要忘记添加jQuery库。 :) –

是的。谢谢：） –

如何在一个div显示时隐藏所有其他div？

回答

相关问题