jQuery-如何在尝试切换另一个div时关闭由h2元素切换的div？

时间：2016-11-27 11:57:20

标签： javascript jquery html css

我有两个标题元素（桌面计算机和平板电脑），我想要切换打开并更改图像标记一次切换。我有这部分工作。但是，我希望它在单击其他标题元素时解开以前切换的div元素。

HTML：

<h1>PA Computer Store</h1>
    <h2 class = "firstH2">Desktop Computers</h2>
    <div class = "outsideDiv">
        <ul>    
            </li><h3>HP</h3></li>
                <div>
                    <ul id="HP_images">
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    </ul>
                </div>
                <li><h3>Apple</h3></li>
                <div>
                    <ul id="Apple_images">
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                        <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    </ul>
                </div>

        </ul>
    </div>
    <h2 class="secondH2">Tablets</h2>
    <div class='outsideDiv'>
    <ul>    
        </li><h3>Samsung</h3></li>
            <div >
                <ul id="Samsung_images">
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                </ul>
            </div>
            <li><h3>Apple</h3></li>
            <div>
                <ul id="AppleTab_images">
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                    <li><a href="newpage.html"><img src="images/book1.jpg" alt="$500"></a></li>
                </ul>
            </div>

    </ul>
    </div>

JQUERY：

 $(document).ready(function() {

$("#categories h2").toggle(
    function() {
        $(this).toggleClass("minus");
        $(this).next().show();  
    },
        function() {
        $(this).toggleClass("minus");
        $(this).next().hide();  
    }
); 
$("#categories h3").toggle(
    function() {
        $(this).toggleClass("minus");
        $(this).next().show();
    },
    function() {
        $(this).toggleClass("minus");
        $(this).next().hide();
    }
);

}）;

相关CSS：

h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
    cursor: pointer;
    background: url(images/plus.png) no-repeat left center;
}
h2.minus {
    background: url(images/minus.png) no-repeat left center;
}
li{
    list-style-type:none;
}
h3{
    font-size: 100%;
    padding: .50em 0 .50em 25px;
    cursor: pointer;
    background: url(images/plus.png) no-repeat left center;
}
h3.minus {
    background: url(images/minus.png) no-repeat left center;
}

1 个答案:

答案 0 :(得分：0)

更改

  • 将所有<ul>更改为<dl>
  • 将所有<li>更改为<dd>
  • 将所有<h3>更改为<dt>
  • 将所有<div>更改为<section>
  • 简化jQuery以委托独立于其他类型的交替类。
  • 在CSS中添加了平滑过渡
  • 替换字体图标的加号和减号PNG

段

$(document).ready(function() {
  $('h2').on('click', function() {
    if ($(this).hasClass('plus')) {
      $('h2').addClass('plus').removeClass('minus');
      $(this).addClass('minus').removeClass('plus');
    } else {
      $(this).addClass('plus').removeClass('minus');
    }
  });
  $('dt').on('click', function() {
    if ($(this).hasClass('plus')) {
      $('dt').addClass('plus').removeClass('minus');
      $(this).addClass('minus').removeClass('plus');
    } else {
      $(this).addClass('plus').removeClass('minus');
    }
  });
});
h2 {
  font-size: 2rem;
  padding: .25em 0 .25em 25px;
  cursor: pointer;
}
h2.plus:before {
  font-size: 1.75rem;
  content: '➕';
}
h2.minus:before {
  font-size: 1.75rem;
  content: '➖';
}
dt {
  font-size: 1.75rem;
  padding: .50em 0 .50em 25px;
  cursor: pointer;
}
dt.plus:before {
  font-size: 1.25rem;
  content: '➕';
}
dt.minus:before {
  font-size: 1.25rem;
  content: '➖';
}
.plus + section {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 1s ease-out, opacity 1.5s linear .5s;
}
.minus + section {
  max-height: 1500px;
  opacity: 1;
  transition: max-height 1.25s ease-in, opacity 2s linear;
}
section {
  margin: 30px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>PA Computer Store</h1>
<h2 class="plus firstH2">Desktop Computers</h2>
<section class="outsideDiv">
  <dl>

    <dd>
      <dt class='plus'>HP</dt>
      <section>
        <dl id="HP_images">
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
        </dl>
      </section>


      <dd>
        <dt class='plus'>Apple</dt>
        <section>
          <dl id="Apple_images">
            <dd>
              <a href="newpage.html">
                <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
              </a>
            </dd>
            <dd>
              <a href="newpage.html">
                <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
              </a>
            </dd>
            <dd>
              <a href="newpage.html">
                <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
              </a>
            </dd>
            <dd>
              <a href="newpage.html">
                <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
              </a>
            </dd>
            <dd>
              <a href="newpage.html">
                <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
              </a>
            </dd>
            <dd>
              <a href="newpage.html">
                <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
              </a>
            </dd>
          </dl>
        </section>
  </dl>
</section>
<h2 class="plus secondH2">Tablets</h2>
<section class='outsideDiv'>
  <dl>

    <dd>
      <dt class='plus'>Samsung</dt>
      <section>
        <dl id="Samsung_images">
          <dd>

            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>

        </dl>
      </section>
      <dt class='plus'>Apple</dt>
      <section>
        <dl id="AppleTab_images">
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
          <dd>
            <a href="newpage.html">
              <img alt="$500" src="http://megaicons.net/static/img/icons_sizes/8/178/128/printed-matter-book-icon.png" width="48">
            </a>
          </dd>
        </dl>
      </section>


  </dl>
</section>
</dl>

相关问题
最新问题