javascript - 隐藏当前打开的 div 并显示点击的 div，反之亦然

Question

我基本上想使用 jquery 创建一个产品列表页面，就像这个页面:https://losangeles.sharegrid.com/browse/

这是我的代码:

$(function(){

  $('.link').click(function(){

    $(this).next('ul').toggle();
    var id = $(this).attr("rel");
    $('#'+id).show();

  });

});

.container {
  width: 100%;
  height: auto;
}

.eighty-percent {
  width: 80%;
  margin: 0 auto;
}

.categories {
  width: 20%;
  float: left;
  ul {
    li {
      ul {
        display: none;
      }
    }
  }
}

.products-list {
  width: 80%;
  float: right;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="eighty-percent">

    <div class="categories left">

      <ul>
        <li>
          <a href="#" class="link" id="main-category" rel="main1">
            main-category-one
          </a>
          <ul>

            <li><a href="#" class="link" id="sub-category-one" rel="main-sub1">sub-cat-one</a></li>
            <li><a href="#" class="link" id="sub-category-one" rel="main-sub2">sub-cat-one</a></li>
            <li><a href="#" class="link" id="sub-category-one" rel="main-sub3">sub-cat-one</a></li>
            <li><a href="#" class="link" id="sub-category-one" rel="main-sub4">sub-cat-one</a></li>

          </ul>
        </li>
      </ul>
    </div>

    <div class="products right">
      <div class="products-list" id="main1">
        <h1>main category one</h1>
      </div>
      <div class="products-list" id="main-sub1">
        <h1>sub category one</h1>
      </div>
      <div class="products-list" id="main-sub2">
        <h1>sub category one</h1>
      </div>
      <div class="products-list" id="main-sub3">
        <h1>sub category one</h1>
      </div>
      <div class="products-list" id="main-sub4">
        <h1>sub category one</h1>
      </div>
    </div>
  </div>
</div>

现在我遇到的问题如您所见，当我单击其他子类别链接时，我无法隐藏当前打开的 div。我希望我的代码片段能够清楚地说明我想要实现的目标

Answer 1

所有更改和详细信息都在源代码中进行了注释。

FIDDLE

片段

$(function() {

  $('.link').click(function(event) {
    /* 
    Added to prevent <a>nchor links 
    from jumping. Note the `event` 
    parameter above as well.
    */
    event.preventDefault();

    $(this).next('ul').toggle();
    var id = $(this).attr("rel");
    /*
    Added a class (i.e. `sub`), to 
    each #main-sub* so all of them will
    be targeted to hide by the .hide()
    method.
    */
    $('.sub').hide();
    $('#' + id).show();

  });

});

.container {
  width: 100%;
  height: auto;
}
/* 
Added to prevent the right
column from wrapping under
the left column.
*/

.subList {
  height: 100vw;
  display: none;
}
.categories {
  width: 50%;
  float: left;
}
.products-list {
  width: 50%;
  float: right;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <!--Removed .eighty-percent because it
hindered layout in demo only, 
adding it or removing it shouln't
affect functionality in your production version.-->

  <div class="categories left">
    <ul>
      <li>
        <a href="#" class="link" id="main-category" rel="main1">main-category-one</a>

        <!--Added a class (i.e. subList) 
          in order to style it easier, 
          see CSS for why styling was needed -->

        <ul class="subList">

          <!--Changed each <a>nchor id as a 
          unique one. You should never have more
          than one of the same id on a page.-->

          <li><a href="#" class="link" id="sub-category-one" rel="main-sub1">sub-cat-one</a>
          </li>
          <li><a href="#" class="link" id="sub-category-two" rel="main-sub2">sub-cat-two</a>
          </li>
          <li><a href="#" class="link" id="sub-category-three" rel="main-sub3">sub-cat-three</a>
          </li>
          <li><a href="#" class="link" id="sub-category-four" rel="main-sub4">sub-cat-four</a>
          </li>

        </ul>
      </li>
    </ul>


  </div>

  <div class="products right">

    <div class="products-list" id="main1">

      <h1>main category one</h1>

    </div>

    <div class="products-list sub" id="main-sub1">

      <h2>sub category one</h2>

    </div>

    <div class="products-list sub" id="main-sub2">

      <h2>sub category two</h2>

    </div>

    <div class="products-list sub" id="main-sub3">

      <h2>sub category three</h2>

    </div>

    <div class="products-list sub" id="main-sub4">

      <h2>sub category four</h2>

    </div>




  </div>


</div>