有没有办法从标题点击禁用部分扩展,而是将功能分配给标题中包含的链接?我们的想法是在标题左侧有一个按钮展开并折叠标题.我希望这会允许我在标题中包含其他元素,这些元素可以在不扩展/折叠的情况下进行点击.谢谢!
解决方法
Here是一种方法.基本上,我正在使用禁用选项和绑定点击事件初始化手风琴,首先启用手风琴,然后做手风琴的事情,最后禁用手风琴.
HTML:
- <div class="demo">
- <div id="accordion">
- <h3>
- <a href="#">Section 1</a>
- <a href="#" data-index="0" class="trigger">Expand this</a>
- </h3>
- <div>
- <p>
- Mauris mauris ante,blandit et,ultrices a,suscipit eget,quam. Integer
- ut neque. Vivamus nisi metus,molestie vel,gravida in,condimentum sit
- amet,nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo
- ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
- </p>
- </div>
- <h3>
- <a href="#">Section 2</a>
- <a href="#" data-index="1" class="trigger">Expand this</a>
- </h3>
- <div>
- <p>
- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
- purus. Vivamus hendrerit,dolor at aliquet laoreet,mauris turpis porttitor
- velit,faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
- faucibus urna.
- </p>
- </div>
- <h3>
- <a href="#">Section 3</a>
- <a href="#" data-index="2" class="trigger">Expand this</a>
- </h3>
- <div>
- <p>
- Nam enim risus,molestie et,porta ac,aliquam ac,risus. Quisque lobortis.
- Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
- ac tellus pellentesque semper. Sed ac felis. Sed commodo,magna quis lacinia
- ornare,quam ante aliquam nisi,eu iaculis leo purus venenatis dui.
- </p>
- <ul>
- <li>
- List item one
- </li>
- <li>
- List item two
- </li>
- <li>
- List item three
- </li>
- </ul>
- </div>
- <h3>
- <a href="#">Section 4</a>
- <a href="#" data-index="3" class="trigger">Expand this</a>
- </h3>
- <div>
- <p>
- Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
- malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus
- orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel
- est.
- </p>
- <p>
- Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
- Class aptent taciti sociosqu ad litora torquent per conubia nostra,per
- inceptos himenaeos.
- </p>
- </div>
- </div>
- </div>
使用Javascript: