代码之家 › 专栏 › 技术社区 › deweius

单击时更改手风琴箭头方向

accordion jquery

deweius · 技术社区 · 8 年前

$('.accordion-item').click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $arrow = $('.accordion-arrow');

    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

3 回复 | 直到 8 年前

gaetanoM 8 年前

你可以简单地使用 toggleClass 要从手风琴调低到手风琴调高:

$(this).find('.accordion-arrow').toggleClass('accordion-down accordion-up');

$('手风琴项目')。点击(功能(e){

事件处理程序。

$('.accordion-item').click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $arrow = $('.accordion-arrow');

    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
    //
    // added next line
    //
    $(this).find('.accordion-arrow').toggleClass('accordion-down accordion-up');
});

li {
    display: block;
}
.accordion {
    width: 957px;
    margin: 0 auto;
}
.accordion .accordion-item {
    background: #ebeeee;
    display: block;
    height: 75px;
    font-size: 24px;
    text-align: left;
    padding-left: 72px;
    -webkit-box-shadow: 0px 5px 5px 0px #c0c0c0;
    -moz-box-shadow: 0px 5px 5px 0px #c0c0c0;
    box-shadow: 0px 5px 5px 0px #c0c0c0;
    margin-bottom: 1.5px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.accordion .inner {
    display: none;
    background: #f1f6f6;
    padding-left: 72px;
    text-align: left;
    padding-top: 17px;
    padding-bottom: 17px;
    -webkit-box-shadow: 0px 5px 5px 0px #c0c0c0;
    -moz-box-shadow: 0px 5px 5px 0px #c0c0c0;
    box-shadow: 0px 5px 5px 0px #c0c0c0;
    margin-bottom: 1.5px;
}
.accordion .accordion-arrow {
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    margin-left: 600px;
    margin-top: 6px;
}
.accordion .accordion-down {
    border-top: 11px solid #74cde8;
}
.accordion .accordion-up {
    border-bottom: 11px solid #74cde8;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>

<ul class="accordion">
    <li>
        <a class="accordion-item"   href="javascript:void(0);">accordion item1
            <div class="accordion-arrow accordion-down"></div>
        </a>
        <div class="inner">
            <p class="accordion-text">some text1</p>

        </div>
    </li>

    <li>
        <a class="accordion-item" href="javascript:void(0);">accordion item2
            <div class="accordion-arrow accordion-down"></div>
        </a>

        <div class="inner">
            <p class="accordion-text">some text2</p>
        </div>
    </li>

    <li>
        <a class="accordion-item"   href="javascript:void(0);">accordion item3
            <div class="accordion-arrow accordion-down"></div>
        </a>
        <div class="inner">
            <p class="accordion-text">some text3</p>

        </div>
    </li>
    <li>
        <a class="accordion-item"   href="javascript:void(0);">accordion item4
            <div class="accordion-arrow accordion-down"></div>
        </a>
        <div class="inner">
            <p class="accordion-text">some text4</p>

        </div>
    </li>
</ul>

Omi 8 年前

toggleClass() 向上切换的方法(&A);向下箭头类。

$('.accordion-item').click(function(e) {
  e.preventDefault();

  var $this = $(this);
  var $arrow = $('.accordion-arrow');
  var $current = $(this).find(".accordion-arrow");
  $arrow.not($current).removeClass("accordion-up").addClass("accordion-down");
  $current.toggleClass("accordion-up accordion-down");
  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
  } else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});

li {
  display: block;
}

.accordion {
  width: 957px;
  margin: 0 auto;
}

.accordion .accordion-item {
  background: #ebeeee;
  display: block;
  height: 75px;
  font-size: 24px;
  text-align: left;
  padding-left: 72px;
  box-shadow: 0px 5px 5px 0px #c0c0c0;
  margin-bottom: 1.5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
}

.accordion .inner {
  display: none;
  background: #f1f6f6;
  padding-left: 72px;
  text-align: left;
  padding-top: 17px;
  padding-bottom: 17px;
  box-shadow: 0px 5px 5px 0px #c0c0c0;
  margin-bottom: 1.5px;
}

.accordion .accordion-arrow {
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  margin-left: 600px;
  margin-top: 6px;
}

.accordion .accordion-down {
  border-top: 11px solid #74cde8;
}

.accordion .accordion-up {
  border-bottom: 11px solid #74cde8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item1
				<div class="accordion-arrow accordion-down"></div>
			    </a>
    <div class="inner">
      <p class="accordion-text">some text1</p>

    </div>
  </li>

  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item2
				<div class="accordion-arrow accordion-down"></div>
			    </a>

    <div class="inner">
      <p class="accordion-text">some text2</p>
    </div>
  </li>

  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item3
				<div class="accordion-arrow accordion-down"></div>
			    </a>
    <div class="inner">
      <p class="accordion-text">some text3</p>

    </div>
  </li>
  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item4
				<div class="accordion-arrow accordion-down"></div>
			    </a>
    <div class="inner">
      <p class="accordion-text">some text4</p>

    </div>
  </li>
</ul>

Omi 8 年前

$('.accordion-item').click(function(e) {
  e.preventDefault();
  var $this = $(this);
  var $arrow = $('.accordion-arrow');
  // Flip the ^ v on click                 
  $(this).find($arrow).css({
    'transform': 'rotate(-180deg)'
  });

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
    // Return the arrow to unflipped
    $(this).find($arrow).css({
      'transform': ''
    });
  } else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);

  }
});

li {
  display: block;
}

.accordion {
  width: 957px;
  margin: 0 auto;
  .accordion-item {
    background: #ebeeee;
    display: block;
    height: 75px;
    font-size: 24px;
    text-align: left;
    padding-left: 72px;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(192, 192, 192, 1);
    -moz-box-shadow: 0px 5px 5px 0px rgba(192, 192, 192, 1);
    box-shadow: 0px 5px 5px 0px rgba(192, 192, 192, 1);
    margin-bottom: 1.5px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }
  .inner {
    display: none;
    background: #f1f6f6;
    padding-left: 72px;
    text-align: left;
    padding-top: 17px;
    padding-bottom: 17px;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(192, 192, 192, 1);
    -moz-box-shadow: 0px 5px 5px 0px rgba(192, 192, 192, 1);
    box-shadow: 0px 5px 5px 0px rgba(192, 192, 192, 1);
    margin-bottom: 1.5px;
  }
  .accordion-arrow {
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    margin-left: 600px;
    margin-top: 6px;
  }
  .accordion-down {
    border-top: 11px solid #74cde8;
  }
  .accordion-up {
    border-bottom: 11px solid #74cde8;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item1
				<div class="accordion-arrow accordion-down"></div>
			    </a>
    <div class="inner">
      <p class="accordion-text">some text1</p>

    </div>
  </li>

  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item2
				<div class="accordion-arrow accordion-down"></div>
			    </a>

    <div class="inner">
      <p class="accordion-text">some text2</p>
    </div>
  </li>

  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item3
				<div class="accordion-arrow accordion-down"></div>
			    </a>
    <div class="inner">
      <p class="accordion-text">some text3</p>

    </div>
  </li>
  <li>
    <a class="accordion-item" href="javascript:void(0);">accordion item4
				<div class="accordion-arrow accordion-down"></div>
			    </a>
    <div class="inner">
      <p class="accordion-text">some text4</p>

    </div>
  </li>
</ul>