javascript - 如何轻松制作自己的 jQuery 手风琴？

Question

如何轻松制作自己的 jQuery 手风琴？我想避免浪费时间尝试适应其他非标准 jQuery UI 手风琴。

Answer 1

HTML：

<div>
    <h2 class="h2toggle">title</h2>
    <div class="cont">content here</div>
</div>

jQuery：

$('.h2toggle').click(function() {
    var $el = $(this).next('.cont');  
    var vis = $el.is(":visible");
    $('.cont').slideUp();
    $el[ vis ? "slideUp" : "slideDown"]();
}).next('.cont').hide();

带有 + / - 图标的 jsBin 演示

Answer 2

一：获取jQuery库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

第二：将其放在您的页面中

<!-- NOTE: You MUST give a unique id to ALL the menu items -->
<div id="item1" class="menuItem">
    First Item
</div>
<div>text</div>
<div id="item2" class="menuItem">
    Second Item
</div>
<div>text</div>

第三：将脚本放在任何你想要的地方

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('.menuItem').next().css({ display: 'none' });

        $('.menuItem').click(function (event) {
            if ($('#' + event.target.id).next().css('display') == 'none') {
                collapseAll();
                $('#' + event.target.id).next().slideDown(500);
            }
        });
    });

    function collapseAll() {
        $('.menuItem').next().slideUp(500);
    }
</script>

奖励：您可以放置​​一些避免头痛的图像

<div id="item1" class="menuItem">
    <img src='@Url.Content("~/Content/icon.png")' alt="" />
    <span>First Item</span>
</div>
<div>text</div>
<div id="item2" class="menuItem">
    <img src='@Url.Content("~/Content/icon.png")' alt="" />
    <span>Second Item</span>
</div>
<div>text</div>

为了正确显示文本左侧的图像，您需要一些 css 格式

.menuItem img { float: left; }
.menuItem span { float: left; }
/* Avoided further styling for simplicity */