Question

任何人都可以建议我如何只需点击一下即可执行展开和折叠操作。我的意思是如果我点击“铅笔”它会像图2 中那样展开，当我点击“natraj Pencil”时它会也如图所示扩展图3 。现在，如果我再次点击“natraj Pencil”，它将关闭，如图2 中所示，当我点击“pencil”时，它将关闭，如图1 所示。所有这些操作都需要使用JavaScript执行，而不是Jquery。

图1

Pencil

图2

Pencil  
    Natraj Pencil  
    Afsara Pencil

大提琴铅笔

图3

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

Answer 1

您可以尝试这样的事情

function toggle(obj) {

    var el = document.getElementById(obj);

    el.style.display = (el.style.display != 'none' ? 'none' : '' );

}

Answer 2

您是否要使用此javascript：http://www.menucool.com/vertical/accordion-menu

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;
    }

最后在fiddle

中的工作示例

使用Javascript展开/折叠

大提琴铅笔

3 个答案: