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 demo with + / - icons

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 */

我怎样才能轻松制作自己的jQuery手风琴？

2 个答案: