单击一个时如何使其他手风琴元素折叠？

Question

我已经让这个 jQuery 手风琴正常工作，因此当您单击它们时，元素会打开和关闭。但是我想知道如何在您单击另一个（关闭的）元素时关闭一个打开的元素。因为我使用了 .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

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

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

Answer 2

如果您可以使用 jQuery UI，它可以立即使用。请参阅演示 here。当您单击 header 时，它会关闭当前打开的。

Answer 3

您可以向刚刚切换的元素添加一个 ID 或 class，然后使用该 class 访问已经切换的元素。然后再次从元素中删除 class 。

单击一个时如何使其他手风琴元素折叠？

How do I make the other accordion elements collapse when I click one?

html

css

jquery

jquery-ui-accordion