Question

我想创建一个手风琴，其中所有标签最初都关闭，每当我点击其中一个标签时，该特定标签打开，第二次点击它关闭。我可以打开div1，但我不知道如何关闭它或如何概括开关。

我还创建了一个codepen示例，您可以看到我到目前为止所做的工作。点击蓝色div，它应该打开隐藏的段落。

<http://codepen.io/anon/pen/qbMBXd>

[编辑：当一个标签打开并且我点击另一个标签时，第一个标签应该关闭，除了当前打开的标签之外的所有其他标签]

Answer 1

将您的javaScript更改为

<div class="colorbox" id="box1" onclick="changeSize('box1')">

丑陋但它确实起作用。

只要单击div，就可以从html中调用该函数

atom

祝你好运

Answer 2

我认为您需要了解JavaScript＆amp; JQuery让这个工作。

你有一个功能，让你有可能在事件发生时改变CSS。比如这样。

document.getElementById(target).style.display = 'none';

另一个功能可以对点击作出反应！

如果显示等于none，您可以使用if-Statement查看，然后将其更改为block或您喜欢的内容，如果不相等，请将其更改为none。

希望我能帮忙:)

巨星，

Traxstar！

Answer 3

好的，有很多方法可以做到这一点。按照你在codepen中的例子，你不能喜欢这个吗？

<div id='2'>

Answer 4

试试这个......：）

.collapse > * + *{
  display:none;
}
.collapse > *{
  cursor:pointer;
}
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}

<div class="collapse" tabindex="1">
  <h2>Boxinum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p>
</div>
<div class="collapse" tabindex="1">
  <h2>Boxinum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p>
</div>
<div class="collapse" tabindex="1">
  <h2>Boxinum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p>
</div>
<div class="collapse" tabindex="1">
  <h2>Boxinum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p>
</div>
<div class="collapse" tabindex="1">
  <h2>Boxinum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p>
</div>

Answer 5

这是我的第二篇文章，请检查是否有用.. :)

＆＃13;

$('div.accordion-body').on('shown', function () {
    $(this).parent("div");

});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<body>
    <div class="accordion-group">
        <div class="accordion-heading">	<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">
							 <span class="pull-right"></span>
									Boxinum
							</a>

        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet
    sodales nunc dolor semper lacus.</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">	<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
							  <span class="pull-right"></span>
									Boxinum
							</a>

        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">	<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">
							  <span class="pull-right"></span>
									Boxinum
							</a>

        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            </div>
        </div>
    </div>
</body>

＆＃13;

点击它时如何隐藏div

5 个答案: