使用JavaScript扩展/崩溃

Question

任何人都可以建议我一键执行扩展和折叠操作。我的意思是，如果我单击'pencile'它将像>图2 中所示，当我单击'natraj pencile ;它也将如图3 中所示扩展。

现在，如果我再次单击'natraj铅笔; 它将按照中的显示，图2 ，当我单击';/em>，它将如图1 中所示关闭。所有这些操作都需要使用JavaScript而不是JQuery执行。

---

图1

Pencil                                                                                                       

---

图2

Pencil  
    Natraj Pencil  
    Afsara Pencil  
    Cello Pencil  

---

图3

Pencil
    Natraj Pencil
         Natraj sented Pencil
         Natraj strechable Pencil
    Afsara Pencil
    Cello Pencil

Answer 1

可能要使用此javascript：http：//www.menucool.com/vertical/accordion-menu

Answer 2

您可以尝试这样的东西

function toggle(obj) {
    var el = document.getElementById(obj);
    el.style.display = (el.style.display != 'none' ? 'none' : '' );
}

Answer 3

我认为您正在寻找此类示例...

html：

<ul id="lists">
    <li>
        <h3 id="accordion" class="mainText" onclick="brand();">Pencil</h3>
    </li>
    <li>
        <div id="topText" class="hideCode">
            <h4 onclick="items();">Natraj Pencil</h4>
        </div>
        <div id="subItems1" class="hideCode">
            <h5>Natraj sented Pencil</h5>
        </div>
        <div id="subItems2" class="hideCode">
            <h5>Natraj strechable Pencil</h5>
        </div>
    </li>
    <li>
        <div id="middleText" class="hideCode">
            <h4>Afsara Pencil</h4>
        </div>
    </li>
    <li>
        <div id="BottomText" class="hideCode">
            <h4>Cello Pencil</h4>
        </div>
    </li>
</ul>

CSS：

ul {
        list-style: none;
    }
    .showCode {
        display: block;
    }
    .hideCode {
        display: none;
    }
    h4 {
        margin-left: 25px;
    }
    h5 {
        margin-left: 50px;
    }

，最后在小提琴中工作示例