自定义手风琴Jquery

我试图通过jQuery自定义手风琴，但它不工作。有人能帮我一下吗?

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

Thanks in advance

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

您的代码可以工作。这是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>

或者，如果您希望单击" header "不仅打开其下方的内容，而且关闭其他内容，则使用:

function MyAccordion() {
  $('.accordion .content').hide();
  $('.accordion .header').click(function() {
    if ($(this).hasClass("active")) {
      $(this).nextUntil('.header').slideUp(250);
      $(this).removeClass('active');
    } else {
      $('.accordion .header').removeClass('active');
      $('.accordion .content').slideUp(250);
      $(this).nextUntil('.header').slideDown(250);
      $(this).siblings('.header').nextUntil('.header').slideUp(250);
      $(this).addClass('active');
      $('.accordion .header').not(this).removeClass('active');
    }
  });
}
MyAccordion();

.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.active {
    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.active:before {
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
  <div class="accordion">
    <ul>
      <li>
        <h5 class="header">Title Lorem Ipsum is simply dummy text of the printing</h5>
        <div class="content">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 class="header">Title Lorem Ipsum is simply dummy text of the printing</h5>
         <div class="content">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 class="header">Title Lorem Ipsum is simply dummy text of the printing</h5>
         <div class="content">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 class="header">Title Lorem Ipsum is simply dummy text of the printing</h5>
         <div class="content">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>

尝试:

    <div class="faq">
      <div class="accordion">
        <ul>
          <li>
            <h5 class="header">Title Lorem Ipsum is simply dummy text of the printing</h5>
            <div class="content">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 class="header">Title Lorem Ipsum is simply dummy text of the printing</h5>
            <div class="content">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>

jQuery:

   function MyAccordion() {
     $('.accordion .content').hide();
     $('.accordion .header').click(function() {
     if ($(this).hasClass("active")) {
          $(this).nextUntil('.header').slideUp(250);
          $(this).removeClass('active');
      } else {
          $(this).nextUntil('.header').slideDown(250);
          $(this).siblings('.header').nextUntil('.header').slideUp(250);
          $(this).addClass('active');
          $('.accordion .header').not(this).removeClass('active');
       }
     });
   }
   MyAccordion();

为"active"类添加一个减号。脚本将类active添加到打开手风琴段上方的<h5>标记。

这里的

JsFiddle

相关内容

最新更新

热门标签：