Jquery 当一个div显示时，如何隐藏所有其他div？

以下是网站：

在标题菜单中。当您将鼠标悬停在每个列表项上时，它将显示不同的div#id

我想知道在标题中显示另一个div时，如何隐藏所有其他div，如此站点：

我还在试着找路

以下是我编写的代码：

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

试一试

---

请分享你的javascript代码到目前为止你自己有没有尝试过？所以，不是一个网站来请求代码，而是请求帮助解决您已有的代码。此外，最好在帖子中包含问题代码，而不是链接到外部站点。一旦问题得到解决，外部站点将不再作为今后其他站点的参考。对此，我很抱歉，我刚刚重写了我的问题。是的，别忘了添加jquery库。：）

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

});

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

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

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