jquery - 单击一个时如何使其他 Accordion 元素折叠？

Question

我已经让这个 jQuery Accordion 正常工作，以便在您单击它们时打开和关闭元素。但是我想知道如何在您单击另一个(关闭的)元素时关闭一个打开的元素。因为我使用了 .slideToggle()，所以我不能真正定位激活了 .slideDown() 的元素，对吗？因为没有.slideDown()。

<div class="accordion">
                <div class="a-entry">
                    <h3 class="a-clickable">Japan</h3>
                    <div class="a-text">
                        <p>
                            Japan is an island country in East Asia. Located in the Pacific Ocean, it lies to the east of the Sea of Japan, the East China Sea, China, North Korea, South Korea and Russia, stretching from the Sea of Okhotsk in the north to the East China Sea and Taiwan in the south. The kanji that make up Japan's name mean "sun origin", and Japan is often called the "Land of the Rising Sun".
                        </p>
                    </div>
                </div>
                <div class="a-entry">
                    <h3 class="a-clickable">China</h3>
                    <div class="a-text">
                        <p>
                            China is a sovereign state in East Asia. It is the world's most populous country, with a population of over 1.35 billion. The PRC is a one-party state governed by the Communist Party, with its seat of government in the capital city of Beijing.[15]It exercises jurisdiction over 22 provinces; five autonomous regions; four direct-controlled municipalities (Beijing, Tianjin, Shanghai and Chongqing); two mostly self-governing special administrative regions (Hong Kong and Macau); and claims sovereignty over Taiwan.
                        </p>
                    </div>
                </div>
                <div class="a-entry">
                    <h3 class="a-clickable">South Korea</h3>
                    <div class="a-text">
                        <p>
                            and commonly referred to as Korea,[9] is a sovereign state in East Asia, constituting the southern part of the Korean Peninsula.[10] The name Korea is derived from the ancient Kingdom of Goguryeo, also known as Koryŏ. Highly urbanized at 92%,[11] Koreans lead a distinctive urban lifestyle with half of them living in the Seoul Capital Area, the world's second largest city[12] with over 25 million residents[13] and a leading global city[14] with the fourth largest economy,[15] rated in 2016 as the world's most livable megacity and safest city to live in.[16] Highly mountainous, Korea is a popular winter sport destination in Asia, hosting the 2018 Winter Olympics.
                        </p>
                    </div>
                </div>

.accordion {
    width: 50%;
    background-color: #ffffff;
    padding: 0;
    margin: 0;
}

.a-clickable {
    background-color: #999;
    padding: 8px;
    border: 3px solid #777;
    margin: 0;
    cursor: pointer;
}

.a-clickable:hover {

}

.a-text {
    display: none;
    padding: 8px;
    padding-top: 0;
    margin: 0;
}

$('.a-clickable').on('click', function() {
    $(this).siblings().slideToggle(300);
});

这是正在运行的当前版本。

https://jsfiddle.net/x8v4cvca/

Answer 1

您必须定位所有可点击对象并隐藏它们(在本例中，slideUp() 在切换被点击的元素之前。

$('.a-clickable').on('click', function() {
    $('.a-clickable').not(this).siblings().slideUp(200);
    $(this).siblings().slideToggle(200);
});