Question

我有以下工作Javascript函数：

    function collapsible(zap) {
        if (document.getElementById) {
            var abra = document.getElementById(zap).style;
            if (abra.display == "block") {
                abra.display = "none";
            } else {
                abra.display = "block";
            }
            return false;
        } else {
            return true;
        }
}

当我在html代码中使用以下内容时，它会显示或隐藏“element”div：

<li><a href="#" onclick="return collapsible('element');">Element</a></li>

这很好。但问题是，我想将该函数用于多个链接，然后是之前点击的其他元素，保持打开状态。

如何重新编程代码，以便只有一个div保持打开而另一个div在我点击其他链接时会被关闭？

事先谢谢！

Answer 1

要做的就是创建一个类（或两个），比如可折叠，活动或打开具有此样式（显示：阻止或无），然后您可以添加或删除该类。

逻辑是：

单击时可折叠类的链接将添加活动或开放类，这将使css保持打开（或激活）的行为。

如果要隐藏其他元素，可以查找具有可折叠类的元素，然后删除活动（或打开）类（如果有）。

Answer 2

如果您可以使用jQuery，更重要的是jQueryUI accordion我认为它可以完全满足您的需求。

但是，如果不使用这两个，我将如何构建它。如上所述，我将使用类来修改您想要显示或隐藏的div的样式。然后js代码可以在每个元素上切换这些类。稍微困难的部分（没有jquery）是修改类值，因为在最终的应用程序中，每个div上可能有很多类。这只是让你前进的一个非常粗略的例子。

Working JSFiddle Example

示例DOM

<div >
    <li><a href="#" onclick="return collapsible('elem1');">Element1</a></li>
    <div id='elem1' class='myelem visible'>
        Element 1 contents
</div>
</div>
<div >
    <li><a href="#" onclick="return collapsible('elem2');">Element2</a></li>
    <div id='elem2' class='myelem'>
        Element 2 contents
    </div>
</div>
<div >
    <li><a href="#" onclick="return collapsible('elem3');">Element3</a></li>
    <div id='elem3' class='myelem'>
        Element 3 contents
    </div>
</div>

示例JS

window['collapsible'] = function(zap) {
    if (document.getElementById)
    {
        var visDivs = document.getElementsByClassName('visible');
        for(var i = 0; i < visDivs.length; i++)
        {
            visDivs[i].className = visDivs[i].className.replace('visible','');
        }
        document.getElementById(zap).className += " visible";
        return false;
    }
    else
        return true;
}

示例CSS：

.myelem {
    display: none;
}
.visible {
    display: block;
}

Answer 3

以下是我的解决方案：http://jsfiddle.net/g5oc0uoq/

$('.content').hide();
$('.listelement').on('click', function(){
  if(!($(this).children('.content').is(':visible'))){
    $('.content').slideUp();
    $(this).children('.content').slideDown();
  } else {
    $('.content').slideUp();
  }
});

如果遇到性能问题，可以使用show（）和hide（）代替slideUp（）和slideDown（）。

Javascript可折叠菜单（隐藏其他元素）

3 个答案: