簡體   English   中英

jQuery-如何在嘗試切換另一個div時關閉由h2元素切換的div?

[英]jQuery- How to close div that is toggled by h2 elements when trying to toggle another div?

我有兩個標題元素(桌面計算機和平板電腦),我想切換打開並更改圖像標志一次切換。 我有這部分工作。 但是,我希望它在單擊其他標題元素時解開以前切換的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;
}

變化

  • 將所有<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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM