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

Question

我有两个标题元素（桌面计算机和平板电脑），我想切换打开并更改图像标志一次切换。 我有这部分工作。 但是，我希望它在单击其他标题元素时解开以前切换的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;
}

Answer 1

变化

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

SNIPPET

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