jquery - 自定义 Accordion Jquery

Question

我正在尝试通过 jQuery 自定义 Accordion ，但它不起作用。谁能帮帮我？

我的示例代码如下，如果有问题请告诉我。

提前致谢

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".accordion li h5").click(function () {		
    		var current_li = $(this).parent();
    		$(".accordion li div").each(function(i,el) {			
    			if($(el).parent().is(current_li)) {				
    				$(el).prev().toggleClass("plus");
    				$(el).slideToggle();				
    			} else{
    				$(el).prev().removeClass("plus");
    				$(el).slideUp();
    			}
    		});
        });
    	$('.accordion li > div').hide();
    		$('.accordion li h5').first().addClass("plus");
    		$('.accordion li > div').first().show().addClass("plus");
    	});
    </script>

    .accordion ul{
    	border-bottom:#ecebe9 solid 1px;
        margin:0;
        padding:0;
        font-family: Arial, Helvetica, sans-serif;
    }
    .accordion ul li{
    	border-left:#ecebe9 solid 1px;
    	border-right:#ecebe9 solid 1px;
        list-style:none;
    }
    .accordion ul li h5{
    	font-size:12px;
    	color:#333333;
    	font-weight:bold;
    	background:#f7f6f5;
    	border-top:#ecebe9 solid 1px;
    	border-left:#ecebe9 solid 1px;
    	border-right:#ecebe9 solid 1px;
    	padding:12px 15px 12px 40px;
    	line-height:19px;
    	cursor:pointer;
    	position:relative;
    }
    .accordion ul li h5.plus{
    	border-bottom:#ecebe9 solid 1px;
    }
    .accordion ul li > div{
    	font-size:12px;
    	color:#333333;
    	line-height:20px;
    	padding:15px 15px 15px 40px;
    }
    .accordion ul li > div a{
    	color:#7f0a19;
    }
    .accordion ul li h5:before{
    	content:"";
    	background:#f00;
    	width:11px;
    	height:11px;
    	opacity:0.7;
    	position:absolute;
    	left:14px;
    	top:14px;
    	transition: all 0.3s ease-in-out  0s;
    	-webkit-transition: all 0.3s ease-in-out  0s;
    	-o-transition: all 0.3s ease-in-out  0s;
    }
    .accordion ul li h5.plus:before{
    	opacity:1;
    }

    <div class="faq">
        <div class="accordion">
            <ul>
                <li>
                    <h5>Title Lorem Ipsum is simply dummy text of the printing</h5>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
                </li>
                 <li>
                    <h5>Title Lorem Ipsum is simply dummy text of the printing</h5>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
                </li>
          </ul>
        </div>
    </div>

Answer 1

您的代码确实有效。 Here is the JSFiddle以下是您发布的代码片段。

您将 jquery 库添加到代码段的方式存在简单的错误。您应该添加一个外部源(链接到 jquery)，或者使用 <script>标签，而不是两者。

$(document).ready(function () {
    $(".accordion li h5").click(function () {
        var current_li = $(this).parent();
        $(".accordion li div").each(function (i, el) {
            if ($(el).parent().is(current_li)) {
                $(el).prev().toggleClass("plus");
                $(el).slideToggle("fast");
            } else {
                $(el).prev().removeClass("plus");
                $(el).slideUp("fast");
            }
        });
    });
    $('.accordion li > div').hide();
    $('.accordion li h5').first().addClass("plus");
    $('.accordion li > div').first().show().addClass("plus");
});

.accordion ul {
    border-bottom:#ecebe9 solid 1px;
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
}
.accordion ul li {
    border-left:#ecebe9 solid 1px;
    border-right:#ecebe9 solid 1px;
    list-style:none;
}
.accordion ul li h5 {
    font-size:12px;
    color:#333333;
    font-weight:bold;
    background:#f7f6f5;
    border-top:#ecebe9 solid 1px;
    border-left:#ecebe9 solid 1px;
    border-right:#ecebe9 solid 1px;
    padding:12px 15px 12px 40px;
    line-height:19px;
    cursor:pointer;
    position:relative;
}
.accordion ul li h5.plus {
    border-bottom:#ecebe9 solid 1px;
}
.accordion ul li > div {
    font-size:12px;
    color:#333333;
    line-height:20px;
    padding:15px 15px 15px 40px;
}
.accordion ul li > div a {
    color:#7f0a19;
}
.accordion ul li h5:before {
    content:"";
    background:#f00;
    width:11px;
    height:11px;
    opacity:0.7;
    position:absolute;
    left:14px;
    top:14px;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
}
.accordion ul li h5.plus:before {
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="faq">
    <div class="accordion">
        <ul>
            <li>
                 <h5>Title Lorem Ipsum is simply dummy text of the printing</h5>

                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
            </li>
            <li>
                 <h5>Title Lorem Ipsum is simply dummy text of the printing</h5>

                <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the</div>
            </li>
        </ul>
    </div>
</div>